一分钟教你如何实现唯美的文字描边

2018-06-24 02:05:13来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前两天有一个原来的同事问我文字描边怎么做,那么今天我们就来说说文字描边这个样式怎么实现.

一.文字描边

-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基础