CSS3box shadow屬性的使用

一、語法：

e ;e ;也可同時寫多組，如box-shadow: 0 -10px #fff ,0 2px #fff,0 3px #fff;

同時和transition使用可是動畫更流暢

二、取值：

1. 陰影型別：此引數可選，預設的投影方式是外陰影；如果取其唯一值「inset」,就是將外陰影變成內陰影；

2.x-offset:是指陰影水平偏移量,其值可正可負，正值，則陰影在物件的右邊，負值，陰影在物件的左邊；

3. y-offset:是指陰影的垂直偏移量，其值也可以是正負值，正值，陰影在物件的底部，負值時，陰影在物件的頂部；

4.陰影模糊半徑：此引數是可選，只能為正值，如果其值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊；

5. 陰影擴充套件半徑：此引數可選，其值可為正負值，正值，則整個陰影都延展擴大，反之，則縮小

6. 陰影顏色：此引數可選，不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此引數。

三、相容瀏覽器的寫法：

-moz-box-shadow:

投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;
//safari and google chrome10.0-
-webkit-box-shadow:
投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;
、 google chrome 10.0+ 、 oprea10.5+ and ie9
box-shadow:
投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;

四、ie濾鏡模擬box-shadow陰影效果

基本語法：filter:progid:dximagetransform.microsoft.shadow(color=』顏色值』, direction=陰影角度（數值）,strength=陰影半徑（數值）);

注意:1.該濾鏡必須配合background屬性一起使用，否則該濾鏡失效；

2.濾鏡裡的顏色屬性必須寫完整，不能用縮寫；

3.濾鏡的陰影是計算在寬高內的；

4.在盒陰影下，box會自動加上overflow:hidden；

關於ie濾鏡，具體可參考

以上博文,參考了 以及 

五、常用陰影的實現**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>box-shadow的用法
title
>
<
style 
type
="text/css"
>
div/*
右下陰影
*/.box-shadow-1
/*四邊同色陰影
*/.box-shadow-2
/*四邊同色陰影擴充套件
*/.box-shadow-3
/*四邊同色內陰影
*/.box-shadow-4
/*四邊異色外陰影
*/.box-shadow-5
/*疊加異色陰影
*/.box-shadow-6
/*類border邊框效果（只設定陰影擴充套件半徑和陰影顏色）
*/.box-shadow-7
/*相容ie
*/.box-shadow
style
>
head
>
<
body
>
<
div 
class
="box-shadow-1"
>
div>
<
div 
class
="box-shadow-2"
>
div>
<
div 
class
="box-shadow-3"
>
div>
<
div 
class
="box-shadow-4"
>
div>
<
div 
class
="box-shadow-5"
>
div>
<
div 
class
="box-shadow-6"
>
div>
<
div 
class
="box-shadow-7"
>
div>
<
div 
class
="box-shadow"
>
div>
body
>
html
>

CSS3 box shadow屬性基礎

定義和用法 box shadow 屬性向框新增乙個或多個陰影。語法 box shadow h shadow v shadow blur spread color inset 值 描述 h shadow 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。...

CSS3 box shadow陰影屬性使用

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

CSS3 box shadow 陰影使用

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