Two ways to implement text stroke in CSS3 (summary)

question

Recently I encountered a requirement to achieve the text stroke effect, as shown below

Solution 1

I first thought of looking at whether there was any attribute in CSS3 that could achieve this, and then I found text-stroke

This property is a composite property that can set text width and text stroke color.

This property is very simple to use: text-stroke:1px#f00; (1px is the text width, #ff is the text stroke color)

I thought the compatibility of this property would stop my slightly raised mouth corners in time, and then gradually solidified

But surprisingly, most browsers have begun to support this property. You only need to 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)

I accidentally discovered a method that can achieve text stroke even without the text-stroke attribute - text-shadow

And the text-shadow property is more compatible and does not need to be prefixed with -webkit-

Demo

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title>text-shadow-text 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 simulated text stroke 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 full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed explanation of single-row function code of date type in MySQL

>>: Add a copy code button code to the website code block pre tag