问题

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

　         

　　解决方法一

　　　　    首先想到去看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>

CSS3实现文字描边的2种方法的更多相关文章

  1. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  2. [BS-19]更改UITextField的placeholder文字颜色的5种方法

    更改UITextField的placeholder文字颜色的5种方法 想要达到的目标是:一个页面上有多个UITextField,当用户聚焦某textField时,该文本框的placeholder的文字 ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  5. 用CSS3实现文字描边

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

  6. html之改变图片透明度而不改变文字的透明度--两种方法实现

    图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...

  7. 用CSS3实现文字描边效果【效果在这儿，创意在你！】

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

  8. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  9. 纯css3的上下左右提示框几种方法

    经常用到三角形提示框,用图片吧,大小框不定,所以,css自己写了,可设置宽高比,就可自适应了. 图形例子如下: css代码如下 <style type="text/css"& ...

随机推荐

  1. 相关pycharm（进阶？）

    记录今日发现 对于pycharm细节 注意:项目的位置可以自己定 这里的新建project,建议对python.exe 文件的选择使用自己安装的位置,如下图 create,你就有了一个解释器是你自己安 ...

  2. error while loading shared libraries

    https://stackoverflow.com/questions/480764/linux-error-while-loading-shared-libraries-cannot-open-sh ...

  3. 数据库——SQL-SERVER练习（2）连接与子查询

    一.实验准备 1.复制实验要求文件及“CREATE-TABLES.SQL”文件, 粘贴到本地机桌面. 2．启动SQL-SERVER服务. 3. 运行查询分析器, 点击菜单<文件>/< ...

  4. CLRCore(CLR核心机制）

    JIT--第一次--标记已--存根--调用--查找存根--执行机器码 C#和CIL的关系: C#和N#都是CIL实现,但是彼此不能互通: C#和N#公开不分满足规范,我们才能互通 CLS就是描述多语言 ...

  5. 虚拟机Centos6.7安装VMTools

    安装VMware Tools,设置共享文件夹 一.基本步骤 1.VMware Workstation菜单栏中,选择“虚拟机”,”安装VMware Tools...“.(注:此时下方可能会弹出“确保您已 ...

  6. 图说真实上海IT圈：张江男VS漕河泾男

    图说上海真实IT圈:张江男VS漕河泾男 架构师修炼宝典 Java   通过比较上海各住宅小区在工作日晚餐与夜宵时段一人食外卖订单指数我们会发现: 上海IT圈两大胜地: 张江高科和漕河泾双双上榜 其中张 ...

  7. echarts地图map城市间如何连线

    let bjData = [ [{name:'北京'}, {name:'上海',value:95}], [{name:'北京'}, {name:'广州',value:90}]]; let conver ...

  8. IDEA设置默认WorkingDirectory

  9. VMware Tools安装方法

    安装VMware Tools的步骤 点击[虚拟机]选项中的[安装VMware Tools],此时在Ubuntu的桌面上就会出现一个光盘图标. 如果之前已经安装过了,[虚拟机]选项中应为[重新安装VMw ...

  10. CMD控制台如何把XXX.sql导入到数据库

    mysql -u root -proot <"F:\Git\cyb.sql" 注意:mysql -u 用户名 -p没有空格加上密码 <"sql文件的路径&qu ...