CSS3屬性之二 box shadow

2021-06-12 22:42:09 字數 2608 閱讀 8751

box-shadow: ||

? ? ||

: 陰影水平偏移值(可取正負值);陰影垂直偏移值(可取正負值);陰影模糊值;陰影顏色 

設定塊陰影

box-shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。

box-shadow的四個引數:

x-offset                         x軸偏移

y-offset                         y軸偏移

blur                            模糊值

color of shadow               陰影顏色

下面來看乙個例子,**如下:

doctype html

>

<

html

>

<

head

>

<

title

>盒子陰影

title

>

<

meta

charset

="utf-8"

/>

<

style

>

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

<

br /><

br /><

br /><

br />

看,是不是很有立體感?沒有設定邊框啊。

div>

body

>

html

>

執行效果如下(chrome中):

還可以一次運用多個box-shadows,這樣做會產生一些有趣的效果,看下面這個例子:

doctype html

>

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

/>

<

style

>

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

<

br /><

br /><

br /><

br />

看,我有兩個顏色的陰影!o(∩_∩)o哈!

div>

body

>

html

>

執行效果如下(chrome中):

可以看到,有兩個顏色的陰影。

="球星雲集"

/>

div>

body

>

html

>

執行效果如下(chrome中):

以前我嗎需要在photoshop中把做成這樣的效果,現在可以直接用css**來實現了。

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屬性筆記 二)

css3屬性筆記選擇器 上 first child 選擇器表示的是選擇父元素的第乙個子元素的元素e。簡單點理解就是選擇元素中的第乙個子元素,記住是子元素,而不是後代元素。link1 link2 link3 通過 first child 選擇器定位列表中的第乙個列表項,並將序列號顏色變為紅色。last...