CSS3新增了一些非常有用的边框阴影样式。通过边框阴影,我们可以为某个元素创建各种各样的视觉效果,使其具有更好的立体感和现代感。
.box { width: 300px; height: 200px; border: 1px solid #ccc; box-shadow: 2px 2px 5px #999; }
上面的代码为一个名为box的div元素添加了一个2px的x轴偏移和2px的y轴偏移的5像素模糊半径的阴影。其效果是给该元素添加了立体感,使其从背景中凸出来。除了x轴和y轴偏移,box-shadow属性还可以接受其他参数,包括扩展半径、阴影颜色、以及inset关键字。
扩展半径表示模糊半径的扩展大小,可以使得阴影更加柔和和自然。阴影颜色可以是十六进制值或者rgba值。inset关键字可以使得阴影呈内阴影效果,而不是常规的外阴影效果。
.box { width: 300px; height: 200px; border: 1px solid #ccc; box-shadow: 0 0 10px #999,inset 0px 0px 10px #ccc; }
上面的代码为一个名为box的div元素添加了一个常规的外阴影效果和一个内阴影效果,其效果是给该元素的边缘上产生了一条高亮的边缘线,并为元素创造了一个凹陷的效果。
总之,通过CSS3的边框阴影功能,可以实现更丰富、更富有层次感的页面效果。借助这些功能,我们可以为网站创造出更加现代感的外观风格。