新起点博客在css3中，“box-shadow”的意思为“盒子阴影”，是一个为元素添加边框阴影的新增属性；该属性可以向div盒子添加一个或多个阴影，语法“box-shadow: 水平阴影 垂直阴影 模糊距离 尺寸 颜色 inset;”。box-shadow这个属性，目的为框盒子添加阴影，使用起来非常的简单。但是有的时候会有复杂的属性操作，而且会发现一些看似复杂好玩的东西竟然是用box-shadow实现。今天web前端教程网就来给大家讲解一下有关简单操作属性的功能。
首先我们来看一下bow-shadow属性值：
- x-shadow：水平阴影的偏移，当值为正时，阴影往x轴正向偏移,即水平向右；反之，值为负时，阴影往x轴反向偏移，即水平向左
- y-shadow：垂直阴影的偏移，当值为正时，阴影往y轴正向偏移,即垂直向下；反之，值为负时，阴影往y轴反向偏移，即垂直向上
- blur-radius：模糊距离，不能为负值；为0表示不模糊，值越大，阴影的边缘就越大，也就越模糊
- spread-radius：阴影的尺寸，参数可选，不设置为0；正值表示阴影扩展，负值表示阴影反向缩小，可抵消偏移和模糊距离的尺寸
- color：阴影的颜色，参数可选，不设置便使用浏览器的默认色，因为各浏览器的默认色不同，推荐还是设置一下
- type：阴影类型，参数可选，不设置默认outset（外部阴影）， 还有inset（内部阴影）
外部阴影演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个div盒子投影外部阴影</title>
<style>
div
{
width:300px;
height:100px;
background-color:orange;
box-shadow: 10px 10px 5px #aaaaaa outset;////box-shadow:水平阴影?垂直阴影?模糊距离?尺寸?颜色
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div>这是一个div盒子阴影</div>
</body>
</html>
内部部阴影演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 5px 5px 5px 5px #ccc inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
评论前必须登录！
注册