CSS3可以为元素设置边框带阴影效果,让网页看起来更加美观。下面是一个展示这种效果的样例代码。
.border { border: 2px solid #ccc; Box-shadow: 2px 2px 5px #888; }
上面的代码为一个类名为“border”的元素设定了2px的灰色实线边框,并在其周围产生2px的投影阴影,阴影的颜色为#888。
border属性设定了边框的样式、宽度和颜色。Box-shadow属性使用了一组水平、垂直和模糊半径来产生阴影效果。你可以通过改变这些属性的值来制作出不同样式的边框阴影效果。
.border { border: 2px dashed #f00; Box-shadow: 5px 5px 10px rgba(0,0.5); }
上述代码为一个类名为“border”的元素设定了一个红色2px虚线边框,并在边框周围产生2px的模糊黑色投影,透明度为0.5。
边框阴影效果能够简单快捷的增强网页的美观程度,在设计网页时可以多加尝试并灵活运用。