问题

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

　         

　　解决方法一

　　　　    首先想到去看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. RPA 案例：银行综合对账系统权限更改中的难点解决

    需求内容 根据表格中给出的信息(提供了机构名称.机构代码.用户信息.具体操作等),选择系统管理 → 用户信息管理 → 用户维护,点击用户所在的机构,在机构中选择需调整的用户,进行相应的增删改操作. 关 ...

  2. 明解C语言 入门篇 第八章答案

    练习8-1 #include<stdio.h> #define diff(x,y)(x-y) int main() { int x; int y; printf("x=" ...

  3. U8 BOM数据结构

    U8 BOM涉及的数据表有四张 bom_bom     BOM资料  该表主要记录BOM表的一些基本信息,版本.创建.审核等信息,不包括任何子件.母件信息:bomid是BOM主键 bom_parent ...

  4. Google_PWA_ServiceWork_渐进式 Web 应用_给应用提供离线体验

    前言:今天结识了google PWA提供的一个对移动端Web应用提供离线体验的一个功能,感觉很有用.我这里不分享自己的写法和代码.官网文档说的很详细,直接粘过来大家看吧. 推荐官网地址:你的第一个渐进 ...

  5. Linux问题记录——主机名变成了bogon

    Linux问题记录——主机名变成了bogon 摘要:本文主要记录了主机名变成bogon的原因以及解决办法. 问题重现 主机名在一次登录后,变成了bogon,此后每次登录Linux系统时都是bogon. ...

  6. JS基本语法---while循环---练习

    JS基本语法---while循环---练习 练习1: 求6的阶乘 var ji = 1;//存储最终的阶乘的结果 var i = 1;//开始的数字 while (i <= 6) { ji *= ...

  7. jqgrid后台处理搜索

    jqgrid后台处理搜索, 如果点击jqgrid自带的搜索,则向后台传递“_search”参数,和searchField.searchOper.searchString三个值.如下所示: string ...

  8. leaflet-webpack 入门开发系列一初探篇（附源码下载）

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  9. BayaiM__经典SQL语句大全

    BayaiM__经典SQL语句大全 原创 作者:bayaim 时间:2016-06-16 09:22:24 32 0删除编辑 以下这篇文章,是一个垃圾,垃圾中的垃圾 ----------------- ...

  10. C#所有经典排序算法汇总

    1.选择排序 选择排序 class SelectionSorter     {         private int min;         public void Sort(int[] arr) ...