Home > Article > Web Front-end > How to set shadow in css3 font
How to set shadow in css3 font
- WBOYOriginal
- 2021-12-15 10:43:254479browse
In CSS, you can use the "text-shadow" attribute to set a shadow for the font. This attribute is used to set a shadow effect for the text. The attribute value can set the horizontal and vertical shadow, blur distance and shadow color of the text. Syntax It is "element {text-shadow: horizontal shadow vertical shadow blur color;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the shadow of css3 font
In css, if you want to set the shadow of the font, you can use the text-shadow attribute.
The syntax is as follows:
text-shadow: h-shadow v-shadow blur color;
The text-shadow property adds one or more shadows to text. This property is a comma-separated list of shades, each shade specified with two or three length values and an optional color value. The omitted length is 0.
The attribute values are as follows:
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wenben{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>这是没有阴影的文本样式</h1>
<h1 class="wenben">这是有阴影的文本样式</h1>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set shadow in css3 font. For more information, please follow other related articles on the PHP Chinese website!