CSS3实现文字描边的2种方法(小结)

  

问题

    最近遇到一个需求,需要实现文字的描边效果,如下图

  

解决方法一

     首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke

    该属性是一个复合属性,可以设置文字宽度和文字描边颜色

    该属性使用很简单:text-stroke:1px#f00;(1px是文字宽度,#ff是文字描边颜色)

 

    本以为该属性的兼容性会及时止住我微微上扬的嘴角,随后逐渐凝固

    但出乎意料的是大多浏览器已经开始支持该属性,只需要加上前缀-webkit-即可

   Demo

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>text-stroke-文字描边</title>        <style>            .demo {                color: mistyrose;                text-align: center;                font-family: Verdana;                font-size: 30px;                font-weight: bold;            }            .stroke {                -webkit-text-stroke: 1px greenyellow;            }        </style>    </head>     <body>        <div class="demo">            <p>没有添加描边</p>            <p class="stroke">添加了字体描边</p>        </div>    </body></html>

   解决方法二(推荐)

    偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow

     并且text-shadow属性的兼容性更好,也不用加前缀-webkit-

     Demo

<!DOCTYPE html><html>     <head>           <meta charset="UTF-8">           <title>text-shadow-文字描边</title>           <style>                .demo {                    text-align: center;                     font-family: Verdana;                     font-size: 30px;                     font-weight: bold;                     color: red;                }                                .stroke {                     text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;                }           </style>     </head>     <body>           <div class="demo">                <p>没有添加描边</p>                <p class="stroke">添加了字体描边</p>           </div>     </body></html>

css 模拟文字描边效果2

p{   text-shadow:   -1px -1px 0 #4f4d57,     1px -1px 0 #4f4d57,   -1px 1px 0 #4f4d57,   1px 1px 0 #4f4d57,   0px 2px 2px rgba(0,0,0,0.6);   font-size: 15px;            color: #f2f2f2;   font-family:"微软雅黑";}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

CSS3实现文字描边的2种方法(小结)