How does CSS achieve shadow effects?
May 29, 2021 Article blog
The shadow effect on a web page can be that the page looks more three-dimensional and beautiful. So today let's learn how CSS achieves shadow effects.
box-shadow
Used to add shadows.
It has four properties:
- Horizontal coordinate offset (fixed relative to the upper left corner of the element);
- ordinate offset (fixed relative to the upper-left corner of the element);
- Blur distance (blur shadow boundaries to prevent over-sharpness);
- The color of the shadow part.
Let's look at the specific application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框 - 编程狮(w3cschool.cn)</title>
<style type="text/css">
div{
height: 100px;width:100px;
background-color: red;
box-shadow: 10px 10px 5px #333;/*横坐标偏移量 纵坐标偏移量 模糊距离 阴影颜色*/
}
img{box-shadow: 5px 5px 5px #333;
margin-top: 10px;}
</style>
</head>
<body>
<div></div>
<img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]" alt="w3cschool">
</body>
</html>The end result:
That's all CSS says about how to achieve shadow effects.