在CSS中,div是最常用的元素之一,它可以用于布局、定位、容器等多种场景。除此之外,div还具有一项强大的特性——阴影。
div { box-shadow: 0 3px 6px rgba(0,0,0,0.16); }
上述代码表示将div的阴影设置为向下偏移3像素,松散程度为6像素,颜色为半透明的黑色。如果想设置阴影向上或向左偏移,只需要在第一个参数中使用负数即可。
除了这个简单的例子,CSS还提供了更多复杂的阴影效果,如多重阴影、内部阴影等。以下是一个多重阴影的示例:
div { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
上述代码表示将div设置为两个阴影,一个颜色较浅、松散程度较大的阴影在上方,一个颜色较深、松散程度较小的阴影在下方。
个人认为,CSS中的阴影是一个非常实用的特性,可以增加页面的立体感和深度感,让页面更加生动、鲜活。