问题

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

　         

　　解决方法一

　　　　    首先想到去看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. Linux进程和计划任务实践

    1.显示统计占用系统内存最多的进程,并排序. 方法一 [root@test ~]#ps aux --sort=%mem USER PID %CPU %MEM VSZ RSS TTY STAT STAR ...

  2. PriorityBlockingQueue

    public class PriorityBlockingQueueTest { /** * 有优先级顺序的阻塞队列,底层实现是数组,无边界.默认是11. * 构造方法可以传入一个比较器,不传的话,默 ...

  3. Redis for OPS 07：Redis 补充说明

    写在前面的话 redis 的各种架构搭建暂时就到这里,本文主要用于补充说明 Redis 的一些概念以及配置文件的相关信息. 常用词汇 缓存穿透: 类似热点数据存储 Redis 一样,对于非热点数据存储 ...

  4. Redis for OPS 01：关于 Redis 基础说明与安装部署

    写在前面的话 本章节开始在主要介绍在运维工作中绕不开的一个话题,数据缓存 NoSQL 服务 Redis,搭建很简单,使用很简单,运行也稳定的一批,一般小公司几乎很少出现以为量的问题导致他 down 掉 ...

  5. 【linux】linux命令--uptime查看机器存活多久和平均负载 解读平均负载含义

    一.uptime命令,查看机器存活时间和平均负载 键入命令: uptime 该结果和 top命令查看结果最上面一行的 是一样的显示. 返回数据介绍: #当前服务器时间: 19:56:44 #当前服务器 ...

  6. python爬虫：将数据保存到本地

    一.python语句存储 1.with open()语句 with open(name,mode,encoding) as file: file.write() name:包含文件名称的字符串; mo ...

  7. css横屏问题的设置

    <link rel="stylesheet" media="all and (orientation:portrait)" href="css/ ...

  8. QTextStream 读取文件乱码的解决办法

    通常都是编码转换的问题,注意如以下红字代码那样设置正确的编码 QFile _file(_f_path);    try{        if(_file.open(QIODevice::ReadOnl ...

  9. centos 下创建本地镜像源，结合 nginx

    1. 创建同步文件 参考清华的Centos源,配置同步文件.https://mirrors.tuna.tsinghua.edu.cn/help/centos/ [root@localhost cent ...

  10. Python序列类型方法

    列表的常用方法 append.insert.extend.pop.remove 元组的两个方法count.index 字符串的常用方法及转义count.find.index.replace.split ...