CSS中設置陰影可以為網頁增添更立體的效果,以下是幾種方式:
1. box-shadow 屬性
選擇器 { box-shadow: 水平偏移量 垂直偏移量 模糊距離 陰影尺寸 陰影顏色; }
其中,水平偏移量和垂直偏移量表示陰影距離元素的水平和垂直方向的距離,模糊距離表示陰影的模糊程度,陰影尺寸表示陰影的擴散程度,陰影顏色表示陰影的顏色。
2. text-shadow 屬性
選擇器 { text-shadow: 水平偏移量 垂直偏移量 模糊距離 陰影顏色; }
text-shadow屬性與box-shadow屬性相似,但text-shadow只對文本起作用。
3. 邊框和背景邊框
.content { border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); background-clip: padding-box; background-color: #fff; }
在設置邊框時,可以同時設置box-shadow屬性。設置background-clip屬性為padding-box,可以讓背景消失在陰影中。此外,也可以給文本框等元素設置類似的效果。
上一篇java php
下一篇css中如何取消li