纯CSS3编码完成文本描边

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

CSS3做为新起的前端开发技术性能够完成许多繁杂转变的实际效果,例如文本描边。这里关键用到text-shadow特性,说白了便是为文本再加黑影实际效果。例:

CSS Code拷贝內容到剪贴板
  1. text-shadow:10px 5px 2px #f60/*text-shadow:x位移 y位移 模糊不清水平 色调 */   

在其中:x位移和y位移表明黑影相对性文本的偏位值,能够为负值。思路实际上很简易:对4个方位都作出模糊不清水平为零的1px黑影

CSS Code拷贝內容到剪贴板
  1. -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,   
  2. #000 -1px 0 0,#000 0 -1px 0; -   
  3. moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;    
  4. text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;    
  5. *filter: Glow(Color=#000, Strength=1);   
  6.  /*对于各流行访问器做了兼容的写法*/   

标准上,text-shadow适用了多方位黑影的写法,但是成本是编码偏多!