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

Two ways to implement text stroke in CSS3 (summary)

CSS3 achieves conic-gradient effect

WeChat applet implements user login module server construction

Detailed explanation of CentOS configuration of Nginx official Yum source

Solution to the problem that docker logs cannot be retrieved

Solve the problems encountered when installing mysql-8.0.11-winx64 in Windows environment

How to import Tomcat source code into idea

How to introduce img images into Vue pages

Analysis of the difference between HTML relative path and absolute path

A brief introduction to protobuf and installation tutorial in Ubuntu 16.04 environment

Unbind SSH key pairs from one or more Linux instances

Recommend

HTML form component example code

Install and deploy java8 and mysql under centos7

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Examples of the correct way to use AES_ENCRYPT() and AES_DECRYPT() to encrypt and decrypt MySQL

7 major elements of web page redesign Share the 7 major elements of web page redesign

js simple and crude publish and subscribe sample code

Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV

JavaScript history object explained

Vue computed properties

The basic principles and detailed usage of viewport

Tips for adding favicon to a website: a small icon in front of the URL

What we have to say about CSS absolute and relative

Detailed steps for setting up the network for the virtual machine that comes with win10 (graphic tutorial)

Node.js+express message board function implementation example

Detailed explanation of the principle and implementation process of Nginx configuration https