CSS是一種常用的Web前端技術語言,能夠為網(wǎng)頁添加各種各樣的效果。其中,陰影是一種很有用的效果,可以讓網(wǎng)頁看起來更加美觀。在CSS中,我們可以利用box-shadow屬性來添加陰影。本文將介紹如何利用CSS實現(xiàn)圓形陰影。
.box { width: 100px; height: 100px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
上述代碼中,我們利用border-radius屬性將一個正方形的元素變成圓形,利用box-shadow屬性添加陰影效果。
具體來說,box-shadow屬性接受4個參數(shù):
- 水平偏移量
- 垂直偏移量
- 模糊半徑
- 顏色
其中,水平偏移量和垂直偏移量控制陰影相對于元素的位置,可以為正值、負值、0或百分比。模糊半徑用來控制陰影的模糊程度,顏色用來控制陰影的顏色。
利用上述代碼可以實現(xiàn)一個圓形陰影的效果,如下圖所示: