How to achieve shadow effect in css: 1. Use the text-shadow attribute to set the text with shadow to achieve the text shadow effect; 2. Use the box-shadow attribute to apply the shadow to the text box to achieve Border shadow effect.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Method 1: Use the text-shadow attribute to achieve text shadow effect
The text-shadow attribute is used to set the text with shadow; the pixel length and width of the shadow can be set and blurred distances and shadow colors.
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 the box-shadow property to achieve the border shadow effect
box- The shadow attribute can apply a 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.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置边框阴影效果</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影！</div>
</body>
</html>Rendering:
(Learning video sharing: 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
