CSS3中的::after伪元素为元素的最后一个子元素新增了内容。
但是,它不仅仅是用来添加文字的,实际上,它也可以用来添加样式,包括阴影等。下面是一个使用::after伪元素添加阴影的示例:
div::after { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
上面的代码会在一个div元素的后面添加一个完全覆盖元素的伪元素,并使用rgba()格式的颜色添加了一个半透明的黑色背景色。然后,使用box-shadow属性添加了一个模糊值为10个像素的黑色阴影。
需要注意的是,伪元素的内容使用content属性指定为空字符串。而且,position属性需要使用absolute或fixed,以便将它的父元素设置为relative或absolute,这样才能够正确地定位伪元素。
最后,需要为伪元素设置一个宽度和高度等于100%的盒子,才能将它的大小设置为与父元素相同。
通过使用::after伪元素和阴影属性,可以轻松地为元素增加一个具有层次感的阴影效果。