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
Recommend
Analysis of the difference between absolute path and relative path in HTML
As shown in the figure: There are many files conne...
js addition, subtraction, multiplication and division precise calculation method example code
Preface Because computer numbers are floating poi...
Usage of mysql timestamp
Preface: Timestamp fields are often used in MySQL...
How to open external network access rights for mysql
As shown below: Mainly execute authorization comm...
Analysis of SQL integrity constraint statements in database
Integrity constraints Integrity constraints are f...
Implementation code for taking screenshots using HTML and saving them as local images
The specific code is as follows: <!DOCTYPE htm...
Recommend a cool flashing alarm button
The effect is as follows: The code is as follows ...
The most detailed method to install docker on CentOS 8
Install Docker on CentOS 8 Official documentation...
How to place large images in a small space on a web page
Original source: www.bamagazine.com There are nar...
Quickly solve the problem of slow and stuck opening of input[type=file]
Why is it that when the input tag type is file an...
Javascript common higher-order functions details
Table of contents 1. Common higher-order function...
Vue implements the magnifying glass function of the product details page
This article shares the specific code of Vue to i...
CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8
Every time I design a web page or a form, I am tr...
Implementation example of Vue+Element+Springboot image upload
Recently, I happened to be in touch with the vue+...
Display special symbols in HTML (with special character correspondence table)
Problem Reproduction When using HTML for editing,...