我们在前端的设计中常常会用到图片和文字,如果只是单调的图片或文字,不怎么好看。所以我们要给它别的效果,比如:阴影效果。要实现阴影效果,我们就要用到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;/*对盒子添加阴影*/
下面是添加了阴影的:
是不是好看一点了呢,那你们学会了吗(๑>ڡ<)✿