淘先锋技术网

首页 1 2 3 4 5 6 7

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伪元素和阴影属性,可以轻松地为元素增加一个具有层次感的阴影效果。