问题

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

　         

　　解决方法一

　　　　    首先想到去看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. Nginx之前后端分离（入门）

    几个月前,公司架构优化,首先就是前后端分离. 所谓前后端分离,就是在传统的前后端代码都在一个项目里的基础上,将前后端代码抽离,把前端代码从后端项目了分离出来,前后端开发人员各自在自己的项目里开发. 为 ...

  2. 浏览器记住密码的自动填充Input问题完美解决方案

    1.input 前from和input占位隐藏 <form style="width:0;height:0;display:none;"> <input type ...

  3. pandas 学习 第7篇：DataFrame - 数据处理（应用、操作索引、重命名、合并）

    DataFrame的这些操作和Series很相似,这里简单介绍一下. 一,应用和应用映射 apply()函数对每个轴应用一个函数,applymap()函数对每个元素应用一个函数: DataFrame. ...

  4. Redis for OPS 03：数据安全与持久化

    写在前面的话 通过前两节,除了安装部分,其它的更多的是作为了解,除非我们面向实际的开发,当然知道更多总是好的,这样才有吹牛逼的资本. 从本节开始我们主要谈谈作为一个运维,在处理 Redis 的维护的时 ...

  5. Spring Boot配置过滤器的两种方式

    过滤器(Filter)是Servlet中常用的技术,可以实现用户在访问某个目标资源之前,对访问的请求和响应进行拦截,常用的场景有登录校验.权限控制.敏感词过滤等,下面介绍下Spring Boot配置过 ...

  6. ECAMScript中的let和const

    let与const命令都是用来在js中声明变量的,在使用上与var相似,但存在一些区别,下面先讲let同var的区别 let 怎么使用呢,同var一样,let  变量名   就可以声明了 区别一:其作 ...

  7. Dynamics CRM 2015/2016新特性之三十三：有了ExecuteTransactionRequest，再也不用担心部分成功部分失败了

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复216或者20160329可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  8. 工具类Base64Util

    在和服务器交互的过程中,有时候我们需要把图片编码成base64字符串传输,记录一下工具类 import android.graphics.Bitmap; import android.graphics ...

  9. 一次Ubuntu16系统的找回root密码的过程

    一 背景知识介绍 ubuntn系统的默认配置,超级用户root的密码是随机的,如果没提前对root用户的密码进行设置, 是不能直接通过root的身份来进行某些操作的,必须使用sudo命令,并通过普通用 ...

  10. 使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面

    在小程序里使用web-view组件,在对小程序点击顶部分享按钮分享时,分享的内容为当前页面的内容,需要使用wx.miniProgram.postMessage来进行处理 H5页面代码 created( ...