CSS3实现文字描边的2种方法

2020-04-14 09:40:59

参考地址 CSS3实现文字描边的2种方法

 问题

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

          

 

  解决方法一

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

复制代码


  • 2019-03-13 09:38:11

    写入MySQL报错超出 max_allowed_packet 的问题

    MySQL会根据配置文件会限制server接受的数据包的大小。如果写入大数据时,因为默认的配置太小,插入和更新操作会因为 max_allowed_packet 参数限制,而导致失败。

  • 2019-03-15 15:28:33

    10分钟教你搭建自己的ngrok服务器

    内网穿透想必开发过微信的同志都很了解,大部分人选择网上寻找各种现成的,比如ngrok官网、ittun-ngrok、sunny-ngrok或者花生壳之类的。但是世界上没有免费的午餐,要不就是收费,要不就是免费但是偶尔会出现连接失败的问题(当然大多数时间是没有问题的)。

  • 2019-03-15 15:29:53

    丢弃花生壳,搭建自己的ngrok作为内网穿透服务器

    公司没有公网,公司在二级路由下面(就是服务商没有给独立IP,也无法动态获取公网IP),然而公司在开发程序的时候,如对接微信等需要返回数据,或者需要别人能访问我们网址,一般我们就只能购买花生壳内网穿透,但是在使用中发现速度慢,经常掉。所以搭建自己的ngrok服务器来保证内网穿透。

  • 2019-03-15 15:31:21

    内网穿透 ngrok 服务器和客户端配置

    ngrok 简介及作用 ngrok 是一款用 go 语言开发的开源软件,它是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。下图简述了 ngrok 的原理。

  • 2019-03-15 15:32:09

    内网打洞以及代码实现

    假设内网的多个ip或者同一ip的不同port,都要访问同一个(外网ip:port)。对NAT来说,从外网接收的包它的(srcIp:srcPort)==(serverIp,serverPort),它的dstIp==natIp,所以NAT只能用dstPort来决定把这个包转发给哪一个(内网Ip:port)

  • 2019-03-15 15:33:08

    Xshell不能按退格、删除键的解决方案

    在使用xshell时,由于每个服务器不同,一些无法使用Backspace键向后删除字符。针对这个问题,本文为大家解答下退格键无法识别如何设置?