CSS3屬性 box shadow測試

2021-09-25 23:09:12 字數 671 閱讀 6342

容器設定陰影 box-shadow 語法:

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

以上各屬性值的解析:

horizontal(水平):指定水平偏移陰影。正值(即:5px)陰影向右,而為負值(即:- 10px)將使它偏向左。

vertical(垂直):指定垂直偏移陰影。正值(即:5px)會使陰影在框的底部,而負值(即:- 10px)將使它偏向上。

blur(模糊):設定的柔化半徑。預設值為0,這意味著沒有模糊。正值增加了模糊,而負值,實際上縮小了陰影。此屬性預設為0。

spread:陰影的尺寸,該引數為可選引數。0px代表陰影和當前的實體一樣大,大於0則表示大於實體的尺寸。

color(顏色):顏色值,也就是設定陰影顏色。

inset:將外部陰影 (outset) 改為內部陰影。該引數為可選引數。

box-shadow-1

box-shadow-2

box-shadow-3

box-shadow-4

box-shadow-5

box-shadow-6

box-shadow-7

box-shadow-8

box-shadow-9

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3屬性box shadow使用教程

css3的box shadow屬性可以讓我們輕鬆實現圖層陰影效果。我們來實戰詳解一下這個屬性。先來看乙個這個屬性的瀏覽器相容性 box shadow有六個可設值 img 讓我們通過幾個例項來看乙個box shadow的效果,先弄個簡單的html供測試 請注意 為了省事兒,下面的css 中只寫了box...