前两天有一个原来的同事问我文字描边怎么做,那么今天我们就来说说文字描边这个样式怎么实现.
一.文字描边
-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); /*文本阴影*/
}
其实文字描边很简单,在给样式的时候注意你给的样式顺序,以及大小,以达到目的为基准就可以了.样式并不可怕,可怕的是你的粗心大意
