CSS3: two methods of text edge tracing (summary)

Time:2020-5-21

  problem

Recently, I met a need to achieve the edge tracing effect of the text, as shown in the following figure

  Solution 1

First of all, I want to see if CSS3 has any properties to implement. Later, I found text stroke

This attribute is a composite attribute, which can set the text width and the text stroke color

This property is easy to use: Text- stroke:1px#f00 ; (1px is the text width, andාff is the text stroke color)

 

I thought that the compatibility of this attribute would stop my slightly raised mouth corner in time, and then gradually solidified

But unexpectedly, most browsers have started to support this attribute, just add the prefix – WebKit –

   Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        < title > text stroke 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>No stroke added</p>
            < p class = "stroke" > added font stroke</p>
        </div>
    </body>
</html>

Solution 2 (recommended)

By chance, I found a method that can realize text stroke even without text stroke attribute — text shadow

And the text shadow attribute is more compatible, and does not need to be prefixed with WebKit-

     Demo

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           < title > text shadow stroke < / 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>No stroke added</p>
                < p class = "stroke" > added font stroke</p>
           </div>
     </body>
</html>

CSS simulation text edge tracing Effect 2

p{
   text-shadow:
   -1px -1px 0 #4f4d57,  
   1px -1px 0 #4f4d57,
   -1px 1px 0 #4f4d57,
   1px 1px 0 #4f4d57,
   0px 2px 2px rgba(0,0,0,0.6);
   font-size: 15px;         
   color: #f2f2f2;
   Font family: "Microsoft YaHei";
}

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.