一分钟教你如何实现唯美的文字描边
2018-06-24 02:05:13来源:未知 阅读 ()
前两天有一个原来的同事问我文字描边怎么做,那么今天我们就来说说文字描边这个样式怎么实现.
一.文字描边
-webkit-text-stroke 文字描边
参数:
参数1 描边大小
参数2 描边颜色
注意: webkit内核有效 只能使用在谷歌 ,safir有效
-webkit-text-stroke: 1px red; |
二.实例
上图的效果我们怎样来实现呢?
HTML结构 CSS样式 字体样式 字体颜色 文字描本阴影 |
那我们来看一下具体代码:
HTML:
<p>我最亲爱的,你过得怎么样?没我的日子,你别来无恙.</p>
CSS:
p{ font-size: 45px; /*字体大小*/ font-weight: 700; /*字体加粗*/ font-family: "华文行楷"; /*字体样式*/ text-align: center; color: #fff; -webkit-text-stroke: 1px pink; /*字体描边 1px的描边大小 粉色*/ text-shadow: 5px 5px 5px rgba(211,211,211,0.6); /*文本阴影*/ }
其实文字描边很简单,在给样式的时候注意你给的样式顺序,以及大小,以达到目的为基准就可以了.样式并不可怕,可怕的是你的粗心大意
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:localStorage使用总结
下一篇:前端--1、HTML基础
- 如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习? 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
- 如何在博客园添加自己的头像 2020-05-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash