溫馨提示×

css box-shadow屬性怎么設置

小億
162
2023-08-01 15:14:41
欄目: 編程語言

box-shadow屬性用于添加一個或多個陰影效果到一個元素。

box-shadow屬性有以下語法:

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

具體參數解釋如下:

  • h-shadow:水平陰影的位置,可以是正值也可以是負值。正值表示陰影位于元素右側,負值表示陰影位于元素左側。

  • v-shadow:垂直陰影的位置,可以是正值也可以是負值。正值表示陰影位于元素下方,負值表示陰影位于元素上方。

  • blur:可選參數,表示模糊程度。值越大,陰影越模糊。默認為0。

  • spread:可選參數,表示陰影的尺寸。正值表示陰影擴展,負值表示陰影收縮。默認為0。

  • color:可選參數,表示陰影的顏色??梢允褂妙伾Q、十六進制、RGB或RGBA值表示。默認為黑色。

  • inset:可選參數,表示陰影是否為內陰影。如果設置為inset,則陰影將顯示在元素內部。

下面是一些例子:

/* 添加一個水平位于元素右側、垂直位于元素下方的黑色陰影 */
box-shadow: 5px 5px black;
/* 添加一個水平位于元素左側、垂直位于元素上方的紅色陰影,模糊程度為10px */
box-shadow: -5px -5px 10px red;
/* 添加一個水平位于元素右側、垂直位于元素下方的黑色陰影,模糊程度為5px,尺寸擴展為10px */
box-shadow: 5px 5px 5px 10px black;
/* 添加一個水平位于元素右側、垂直位于元素下方的黑色內陰影 */
box-shadow: 5px 5px black inset;

你可以根據需要組合不同的參數來設置box-shadow屬性,創建出各種不同的陰影效果。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女