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)

On Visual Design and Interaction Design

MySQL performance optimization index pushdown

Docker data storage tmpfs mounts detailed explanation

How to implement email alert in zabbix

How to use a field in one table to update a field in another table in MySQL

This article will help you thoroughly understand the specific use of cgroup in Docker

Solution to the problem of crash when opening the command line window after installing MySQL 5.7

mysql-8.0.16 winx64 latest installation tutorial with pictures and text

Practice of using Tinymce rich text to customize toolbar buttons in Vue

IE8 browser will be fully compatible with Web page standards

Recommend

Detailed explanation of html printing related operations and implementation

MySQL slow_log table cannot be modified to innodb engine detailed explanation

Methods to enhance access control security in Linux kernel

How to install the graphical interface in Linux

Explain TypeScript enumeration types in detail

js to achieve simulated shopping mall case

Docker packages the local image and restores it to other machines

JavaScript Basics Operators

Detailed explanation of how MySQL solves phantom reads

Analysis of the usage of Xmeter API interface testing tool

Linux firewall iptables detailed introduction, configuration method and case

How to change the system language of centos7 to simplified Chinese

Tomcat common exceptions and solution code examples

Improve the efficiency of page code modification and master the core knowledge of HTML language

React component communication routing parameter transfer (react-router-dom)