本文讲解如何使用CSS的box-shadow属性为网页元素添加阴影效果，通过实例演示了添加阴影前后视觉体验的变化，让页面设计更加生动。
我们在前端的设计中常常会用到图片和文字，如果只是单调的图片或文字，不怎么好看。所以我们要给它别的效果，比如：阴影效果。要实现阴影效果，我们就要用到box-shadow属性，它是一个复合属性，用于整个盒模型添加阴影。它有4个属性值：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。好了让我们看下有阴影和没有的区别。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#divone {
width: 300px;
height: 300px;
margin: 200px auto;
padding: 10px;
font-size: 25px;
text-align: center;
line-height: 300px;
border: 10px solid #900;
border-radius: 40px;
}
</style>
</head>
<body>
<div id="divone">
<img src="./null-7625848be744b51b.jpg" style="width: 300px; height: 300px;" alt="">
</div>
</body>
</html>
效果图：
我们给它加一句代码看看：
box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/
下面是添加了阴影的：
是不是好看一点了呢，那你们学会了吗(๑＞ڡ＜)✿
扫一扫
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
