Home > Article > Web Front-end > How to write shadow code in css3
How to write shadow code in css3
- WBOYOriginal
- 2021-11-25 15:08:073459browse
Writing: 1. "Element object {box-shadow: horizontal shadow vertical shadow blur distance shadow size color inset;}", used to add shadow to the element box; 2. "Text object {text-shadow: Horizontal shadow vertical shadow blur distance color;}", used to add shadows to text elements.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to write the shadow code in css3
In css, you can set a shadow to the text through the text-shadow attribute. Add one or more shadows to the box via the box-shadow property.
The syntax of the text-shadow attribute is:
text-shadow: h-shadow v-shadow blur color;
The syntax of the box-shadow attribute is:
box-shadow: h-shadow v-shadow blur spread color inset;
Let’s take a look at it through an example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 10px 10px 5px #888888;
}
h1{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<div></div>
<h1>文本阴影效果！</h1>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to write shadow code in css3. For more information, please follow other related articles on the PHP Chinese website!