CSS3中的::after偽元素為元素的最后一個子元素新增了內(nèi)容。
但是,它不僅僅是用來添加文字的,實際上,它也可以用來添加樣式,包括陰影等。下面是一個使用::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個像素的黑色陰影。
需要注意的是,偽元素的內(nèi)容使用content屬性指定為空字符串。而且,position屬性需要使用absolute或fixed,以便將它的父元素設(shè)置為relative或absolute,這樣才能夠正確地定位偽元素。
最后,需要為偽元素設(shè)置一個寬度和高度等于100%的盒子,才能將它的大小設(shè)置為與父元素相同。
通過使用::after偽元素和陰影屬性,可以輕松地為元素增加一個具有層次感的陰影效果。