美文网首页
用CSS3实现文字描边

用CSS3实现文字描边

作者: 爱上小媳妇 | 来源:发表于2016-11-27 15:38 被阅读0次

CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。

 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

text-shadow:10px 5px 2px #f60;  
/*text-shadow:x位移 y位移 模糊程度 颜色 */

其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。

思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;   
*filter: Glow(Color=#000, Strength=1);  
/*针对各主流浏览器做了适配的写法*/

原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!

相关文章

  • 用CSS3实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。 这里主要用到text-shadow属性,顾名...

  • ios 文字外描边效果

    设计提出文字描边效果,但是富文本自带的文字描边效果,是向文字内外同时描边 效果 所以需要自己实现,采用的方法是重写...

  • Android TextView字体描边

    原文:链接地址 今天公司要求做一个字体描边功能,在网上搜到一个不错的,可以实现改变文字描边宽度和描边颜色,功能实现...

  • ios 文字外描边实现

    自定义UIlabel来实现。 在.h文件中添加属性 #import NS_ASSUME_NONNULL_BEGIN...

  • 文字描边

  • 文字描边

    效果: 描边完成了,喜欢就留个小❤️吧

  • 使用CSS给文字添加描边效果

    CSS如何实现文字描边效果?下面本篇文章就来给大家介绍一下使用CSS给文字添加描边效果的方法,希望对大家有所帮助。...

  • 文字描边效果

    简单描边 渐变描边 主要是用到背景渐变的样式。 SVG多彩描边效果 SVG动画霓虹灯效果

  • UILabel 文字描边

    titleLabel.shadowColor= [UIColor blackColor]; titleLabel....

  • CSS文字描边

    直接上代码css代码:div { margin: 50px auto 100px; font-size: 100p...

网友评论

      本文标题:用CSS3实现文字描边

      本文链接:https://www.haomeiwen.com/subject/nqlnpttx.html