CSS的box-shadow屬性用于向元素添加陰影效果。它可以接受多個值,用逗號分隔。下面是使用box-shadow屬性的語法:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平方向上的陰影偏移量,可正可負。
v-shadow:垂直方向上的陰影偏移量,可正可負。
blur:可選,模糊半徑。
spread:可選,陰影的尺寸。
color:可選,陰影的顏色。
inset:可選,如果設置為"inset",則陰影將被繪制在元素內部。
以下是一些示例:
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
這個示例將在元素的右下角添加一個2像素的陰影,陰影顏色為半透明的黑色。
.box {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
這個示例將在元素周圍添加一個10像素的模糊陰影,陰影顏色為半透明的黑色。
.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
這個示例將在元素內部添加一個10像素的陰影,陰影顏色為半透明的黑色。
你可以根據需要調整這些值來創建不同的陰影效果。