Home >Web Front-end >CSS Tutorial >How to achieve shadow effect in css
How to achieve shadow effect in css
- 青灯夜游Original
- 2021-04-13 18:37:2323549browse
Method: 1. Use the text-shadow attribute, the syntax "text-shadow: horizontal shadow vertical shadow blur distance color;"; 2. Use the box-shadow attribute, the syntax "box-shadow: horizontal shadow vertical shadow blur distance shadow size color inset;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Method 1: Use text-shadow attribute
text-shadow attribute is used to set the text with shadow; the pixel length of the shadow can be set , width and blur distance as well as the color of the shadow.
Syntax:
text-shadow: h-shadow v-shadow blur color;
Property values:
h-shadow: Sets the position of the horizontal shadow, negative values are allowed.
v-shadow: Sets the position of the vertical shadow, allowing negative values.
blur: Set the blur distance.
color: Set the color of the shadow.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影！</h1>
</body>
</html>
##Method 2: Use box-shadow attribute
box-shadowThe property can apply shadow to the text box, and can set the pixel length, width and blur distance of the shadow as well as the color of the shadow.
box-shadow: h-shadow v-shadow blur spread color inset;Attribute value:
- h-shadow: Sets the position of the horizontal shadow, negative values are allowed; required value, Cannot be omitted.
- v-shadow: Set the position of the vertical shadow, negative values are allowed; required value, cannot be omitted.
- blur: Set the blur distance; optional value, can be omitted.
- spread: Set the size of the shadow; optional value, can be omitted.
- color: Set the color of the shadow; optional value, can be omitted.
- inset: Sets the inner shadow to change the shadow from the outer shadow (at the beginning); optional value, can be omitted.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置阴影效果</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo img{
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="demo">
<img src="img/1.jpg"/ alt="How to achieve shadow effect in css" >
</div>
</body>
</html>
css video tutorial)
The above is the detailed content of How to achieve shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!