CSS3中怎么实现文字描边效果

发布时间:2021-08-10 14:03:24 作者:Leah
来源:亿速云 阅读:113

这篇文章将为大家详细讲解有关CSS3中怎么实现文字描边效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

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

其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。思路其实很简单:对四个方向都作出模糊程度为零的1px阴影

CSS Code复制内容到剪贴板


  1. -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);   
     /*针对各主流浏览器做了适配的写法*/


关于CSS3中怎么实现文字描边效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. css3给文字加描边的方法
  2. Unity Shader如何实现描边OutLine效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS中怎样实现水平居中

下一篇:CSS3 中怎么利用text-shadow实现文字阴影效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》