问题

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

　         

　　解决方法一

　　　　    首先想到去看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. 使用HTMLTestRunner模块更优美地展示接口测试报告

    优化版本的HTMLTestRunner模块,从我的百度网盘获取: 链接:https://pan.baidu.com/s/1f8eLpX5qBrpJsVlXKjquRQ 提取码:qqlu 测试报告展示: ...

  2. tensorflow slim代码使用

    此处纯粹作为个人学习使用,原文连接:https://www.jianshu.com/p/dc24e54aec81 这篇文章是借鉴很多博文的,作为一个关于slim库的总结 导入slim模块 import ...

  3. 学习UML类图

    在类图中一共包含以下几种模型元素,分别是:类(class).接口(interface)以及类之间的关系. 1.类(class) 在面向对象编程中,类是对现象世界中一组具有相同特征的物体的抽象. 2.接 ...

  4. 在生成.net core 3.0程序时不包含nuget库

    在.net core 3.0中,默认的生成行为有了两个变化,一个是默认生成可执行文件,另一个是会复制依赖的Nuget项. 前一个变化会默认生成可执行的exe,用起来更加方便了.另一个变化可能是为了减少 ...

  5. 用ASP.NET Core构建可检测的高可用服务--学习笔记

    摘要 随着现代化微服务架构的发展,系统故障的定位与快速恢复面临着诸多挑战,构建可检测的服务,帮助线上保障团队时刻掌控应用的运行状况越来越重要.本次分享会讲解如何让 ASP .NET Core 应用与现 ...

  6. Vue中计算属性、侦听、过滤、自定义指令、ref的操作

    1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...

  7. Web基础--HTML、Css入门

    一.Web项目(可跳过,直接从下一个标题开始) 1.Web项目: 指的是带网页的项目,通过浏览器可以访问的项目.比如:淘宝.天猫等. 2.Web项目构成: 浏览器(客户端).服务器.数据库. 3.Ja ...

  8. ABP进阶教程10 - PDF导出中文乱码

    点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出PDF,中文信息导出为乱码. 解决方案 导出PDF是通过pdfmake.js实现的. 检查发现是pdfmake引用的vfs_fonts.js字 ...

  9. 事务的四大性质：ACID

    1. 原子性(Atomicity) 一个原子事务要么完整执行,要么干脆不执行.这意味着,工作单元中的每项任务都必须正确执行.如果有任一任务执行失败,则整个工作单元或事务就会被终止.即此前对数据所作的任 ...

  10. Linux—网络通讯管理命令

    一.ping命令 . ping 主机名 . ping 域名 [root@localhost ~]# ping www.baidu.com . ping IP地址 [root@localhost ~]# ...