box-shadow: ||
? ? ||
: 陰影水平偏移值(可取正負值);陰影垂直偏移值(可取正負值);陰影模糊值;陰影顏色
設定塊陰影
box-shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。
box-shadow的四個引數:
x-offset x軸偏移
y-offset y軸偏移
blur 模糊值
color of shadow 陰影顏色
下面來看乙個例子,**如下:
doctype html執行效果如下(chrome中):>
<
html
>
<
head
>
<
title
>盒子陰影
title
>
<
meta
charset
="utf-8"
/>
<
style
>
.box
style
>
head
>
<
body
>
<
div
class
="box"
>
<
br /><
br /><
br /><
br />
看,是不是很有立體感?沒有設定邊框啊。
div>
body
>
html
>
還可以一次運用多個box-shadows,這樣做會產生一些有趣的效果,看下面這個例子:
doctype html執行效果如下(chrome中):>
<
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
>
可以看到,有兩個顏色的陰影。
="球星雲集"
/>
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...