CSS3技術為我們帶來了眾多的新特性,其中之一就是div光環,通過為元素設置box-shadow屬性,可以實現這一效果。
要實現div光環,需要為其設置一個基礎的樣式:
div { width: 100px; height: 100px; border-radius: 50%; }
接著,添加box-shadow樣式來實現光環效果:
div { box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3); }
其中,box-shadow屬性包含四個值:
box-shadow: X偏移量 Y偏移量 模糊程度 陰影大小 陰影顏色;
通過調整四個值可以實現不同的光環效果。例如,調整陰影大小和模糊程度可以讓光環更加模糊和擴散。
最后,可以通過動畫效果讓光環閃爍或者旋轉等:
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { animation: rotate 2s linear infinite; }
以上就是使用CSS3實現div光環的方法。