css3 邊框陰影 box shadow

box-shadow是向盒子新增陰影。支援新增乙個或者多個。

很簡單的一段**，就實現了投影效果，酷斃了。我們來看下語法：

box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

引數介紹：

注意：inset 可以寫在引數的第乙個或最後乙個，其它位置是無效的。

為元素設定外陰影：

示例**：

.box_shadow

效果：

為元素設定內陰影：

示例**：

.box_shadow

效果：

新增多個陰影：

以上的語法的介紹，就這麼簡單，如果新增多個陰影，只需用逗號隔開即可。如：

.box_shadow

效果：

1、陰影模糊半徑與陰影擴充套件半徑的區別

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

陰影擴充套件半徑：此引數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

2、x軸偏移量和y軸偏移量值可以設定為負數

box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

x軸偏移量為負數：

.boxshadow-outset

效果圖：

y軸偏移量為負數：

.boxshadow-outset

效果圖：

CSS3 邊框陰影box shadow

box shadow是css3中的乙個屬性，它可以向框新增乙個或多個陰影。box shadow h shadow v shadow blur spread color inset 其中box shadow的屬性 h shadow 水平陰影的位置。v shadow 垂直陰影的位置。blur 模糊距離 ...

css3 邊框圓角陰影漸變

css3堅持漸進增強 從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能，向頁面新增無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支援時，它們會自動地呈現出來並發揮作用。原則。相對的是優雅降級原則，即是一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。css3中新增特性包括...

css3背景漸變與邊框陰影

一 盒子陰影和文字陰影 box shadow 盒子陰影 ie9 5個引數 引數1 水平偏移量 必選 引數2 垂直偏移量 必選 引數3 陰影模糊值 必選 引數4 陰影外延值 可選 引數5 陰影顏色 必選 外延值是可以省略的 乙個盒子可以使用多個陰影 box shadow 0 0 12px 3px re...