在CSS中,可以使用box-shadow
屬性給元素四周添加陰影,這個(gè)屬性接受多個(gè)參數(shù),包括陰影的水平偏移、垂直偏移、模糊半徑和顏色等,下面是一個(gè)簡(jiǎn)單的例子,展示如何使用box-shadow
給元素添加陰影:
.box { width: 200px; height: 200px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; box-shadow: 10px 10px 5px #888; }
在這個(gè)例子中,.box
類定義了一個(gè)帶有陰影的盒子。box-shadow
屬性的值10px 10px 5px #888
表示:
10px
:水平偏移量,指定陰影在水平方向上的距離。
10px
:垂直偏移量,指定陰影在垂直方向上的距離。
5px
:模糊半徑,指定陰影的模糊程度。
#888
:顏色,指定陰影的顏色。
通過(guò)調(diào)整這些參數(shù),你可以控制陰影的大小、位置和顏色,你也可以使用逗號(hào)分隔多個(gè)box-shadow
屬性來(lái)添加多個(gè)陰影效果。
.box { width: 200px; height: 200px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; box-shadow: 10px 10px 5px #888, 20px 20px 10px #666, 30px 30px 15px #444; }
在這個(gè)例子中,我們給.box
類添加了三個(gè)不同的陰影效果,通過(guò)調(diào)整偏移量、模糊半徑和顏色來(lái)創(chuàng)建不同的陰影樣式,希望這個(gè)例子能幫助你更好地理解和使用CSS的box-shadow
屬性來(lái)添加陰影效果。