成都网站建设设计

将想法与焦点和您一起共享

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

这篇文章将为大家详细讲解有关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中怎么实现文字描边效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站标题:CSS3中怎么实现文字描边效果
文章转载:http://chengdu.cdxwcx.cn/article/pdgdci.html