溫馨提示×

css的boxshadow怎么使用

小億
106
2023-07-07 22:40:49
欄目: 編程語言

CSS的box-shadow屬性用于向元素添加陰影效果。它可以接受多個(gè)值，用逗號(hào)分隔。下面是使用box-shadow屬性的語法：

box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：水平方向上的陰影偏移量，可正可負(fù)。

  • v-shadow：垂直方向上的陰影偏移量，可正可負(fù)。

  • blur：可選，模糊半徑。

  • spread：可選，陰影的尺寸。

  • color：可選，陰影的顏色。

  • inset：可選，如果設(shè)置為"inset"，則陰影將被繪制在元素內(nèi)部。

以下是一些示例：

.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

這個(gè)示例將在元素的右下角添加一個(gè)2像素的陰影，陰影顏色為半透明的黑色。

.box {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

這個(gè)示例將在元素周圍添加一個(gè)10像素的模糊陰影，陰影顏色為半透明的黑色。

.box {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

這個(gè)示例將在元素內(nèi)部添加一個(gè)10像素的陰影，陰影顏色為半透明的黑色。

你可以根據(jù)需要調(diào)整這些值來創(chuàng)建不同的陰影效果。

0 踩