css3给边框加阴影 |css=

.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

box-shadow属性可以接受多个值，第一个值是水平偏移量，第二个值是垂直偏移量，第三个值是阴影模糊半径，第四个值是阴影颜色。在上面的例子中，阴影所偏移的距离都是0，也就是说阴影将会固定在边框的四周，阴影的模糊半径为10px，颜色为rgba(0, 0, 0, 0.5)，也就是半透明的黑色。

.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5);
}

如果想要为边框添加多层阴影，只需要在box-shadow属性中添加多组值即可。在上面的例子中，大家为边框添加了两层阴影，第一层的模糊半径为10px，第二层的模糊半径为20px。

.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}

如果想要使阴影在边框内部出现，而不是在边框外面，只需要在box-shadow属性中添加一个关键字inset即可。

通过CSS3的box-shadow属性，大家可以轻松地为边框添加阴影效果，从而使网页显得更具层次感和深度感。