css學習21 建立盒子陰影

2021-10-19 08:33:30 字數 468 閱讀 6164

對盒子新增陰影效果,要通過box-shadow屬性實現。

值:box-shadow: hoffset voffset blur spread color inset

說明hoffset

陰影的水平偏移量,是乙個長度值,正值代表陰影向右偏移,負值代表陰影向左偏移

voffset

陰影的垂直偏移量,是乙個長度值,正值代表陰影位於元素盒子下方,負值代表陰影位於元素盒子上方

blur

(可選)指定模糊值,是乙個長度值,值越大盒子的邊界越模糊。預設值為0,邊界清晰

spread

(可選)指定陰影的延伸半徑,是乙個長度值,正值代表陰影向盒子各個方向延伸擴大,負值代表陰影沿相反方向縮小

color

(可選)設定陰影的顏色,如果省略,瀏覽器會自行選擇乙個顏色

inset

(可選)將外部陰影設定為內部陰影(內嵌到盒子中)

CSS陰影盒子

1.inset 可選 內陰影,不設定inset,表示盒子外部顯示乙個投影。也可寫在最後。2.橫向偏移量 必選 設定為正值,表示陰影相對盒子向右偏移。負值表示陰影相對盒子向左偏移 3.縱向偏移量 必選 設定正值,表示陰影相對盒子向下偏移,反之則相反。4.模糊範圍 可選 值越大,陰影模糊範圍越大,顏色越...

css文字陰影和盒子陰影

文字陰影 text shadow 4個引數 水平陰影位置,垂直陰影位置,陰影模糊距離,陰影顏色 css h1 html 頁面效果 注意 text shadow的引數顏色可以寫在前面也可以寫在後面,但是不能寫在中間,否則沒有效果。h1 頁面效果 text shadow還支援樣式疊加 h1 頁面效果 注...

CSS盒子陰影 偽類

box shadow 水平陰影,垂直陰影,模糊距離,陰影尺寸,陰影顏色,內外陰影 注意 內陰影inset 外陰影預設值 after before 偽類 這兩個偽類功能 在目標盒子追加新盒子 after 子集結尾處追加盒子 before 子集開頭處追加盒子 注意 1.偽類追加的盒子顯示模式都是行內,一...