在 CSS3 中,可以使用 box-shadow 屬性給盒子添加陰影效果。它的語(yǔ)法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,各個(gè)屬性含義如下:
·h-shadow:必選屬性,表示水平陰影的位置。正值表示向右,負(fù)值表示向左。
·v-shadow:必選屬性,表示垂直陰影的位置。正值表示向下,負(fù)值表示向上。
·blur:可選屬性,表示陰影的模糊程度。默認(rèn)值為 0。
·spread:可選屬性,表示陰影的擴(kuò)展距離。正值表示擴(kuò)展,負(fù)值表示收縮。默認(rèn)值為 0。
·color:可選屬性,表示陰影的顏色。默認(rèn)值為黑色。
·inset:可選屬性,表示將陰影設(shè)為內(nèi)陰影。如果設(shè)置了該屬性,則陰影在盒子內(nèi)部,否則在盒子外部。默認(rèn)值為外陰影。
例如,如果要給一個(gè)盒子添加一個(gè)向右、向下偏移 10px 的黑色外陰影,可以這樣寫(xiě):
box-shadow: 10px 10px 0 0 black;
如果要添加一個(gè) 5px 的模糊陰影,可以在后面加上 5px:
box-shadow: 10px 10px 5px 0 black;
如果要添加一個(gè) 10px 的擴(kuò)展距離,可以在后面再加上 10px:
box-shadow: 10px 10px 5px 10px black;
如果要將陰影設(shè)為內(nèi)陰影,可以在后面加上 inset:css
box-shadow: inset 10px 10px 5px 0 black;