CSS3 box shadow屬性基礎

2021-09-29 04:13:14 字數 1201 閱讀 2091

定義和用法

box-shadow 屬性向框新增乙個或多個陰影。

語法

box-shadow: h-shadow v-shadow blur spread color inset;
值					描述	

h-shadow 必需。水平陰影的位置。允許負值。

v-shadow 必需。垂直陰影的位置。允許負值。

blur 可選。模糊距離。

spread 可選。陰影的尺寸。

color 可選。陰影的顏色。請參閱 css 顏色值。

inset 可選。將外部陰影 (outset) 改為內部陰影。

"box">設定水平方向陰影box-shadow

: 10px 0;

"box2">設定水平方向和垂直陰影box-shadow

: 10px 10px;

"box3">設定水平、垂直、模糊距離box-shadow

: 10px 10px 10px;

"box4">加上陰影尺寸10px 10px 10px 10px

"box5">改為內部陰影

效果(沒有設定陰影顏色的話,預設和字型的顏色一樣)

設定了陰影顏色的效果

設定h-shadow(水平陰影的值)和v-shadow(垂直陰影的值)為負值的陰影效果==(只允許h-shadow和v-shadow設定為負值,其它的引數設定為負值無效)==

.box,.box2,.box3,.box4,.box5

.box2

.box3

.box4

.box5

CSS3box shadow屬性的使用

一 語法 e e 也可同時寫多組,如box shadow 0 10px fff 0 2px fff,0 3px fff 同時和transition使用可是動畫更流暢 二 取值 1.陰影型別 此引數可選,預設的投影方式是外陰影 如果取其唯一值 inset 就是將外陰影變成內陰影 2.x offset ...

CSS3 box shadow陰影屬性使用

語法 box shadow 投影方式 水平偏移量 垂直偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 定義 給元素新增周邊的陰影效果 引數 預設值定義 陰影型別 outset 可選值 inset 選擇投影方式為 外投影還是內投影 水平偏移量 正 陰影在元素的右邊 負 陰影在元素的左邊 陰影水平偏移...

CSS3 box shadow 陰影使用

css3 box shadow 內陰影與外陰影 1 box shadow具體使用方法,語法 e 換句說 物件選擇器 取值 投放方式 預設是外陰影 box shadow屬性至多有6個引數設定,他們分別取值 陰影型別 此引數是乙個可選值,如果不設值,其預設的投影方式是外陰影 如果取其唯一值 inset ...