CSS3 邊框陰影box shadow

2021-10-03 17:07:35 字數 1929 閱讀 7423

box-shadow是css3中的乙個屬性，它可以向框新增乙個或多個陰影。

box-shadow：h-shadow v-shadow blur spread color inset;
其中box-shadow的屬性：

h-shadow: 水平陰影的位置。

v-shadow:垂直陰影的位置。

blur：模糊距離

spread：陰影的尺寸

color：陰影的顏色

1.h-shadow：這個值指定了陰影的水平偏移量。即在x軸上陰影的位置。如果是正數陰影會出現在元素的右邊，如果是負值陰影出現在元素的左邊。

正值



.box


.shadow1


<


/style>


="box shadow1"


>


10px<


/div>
負值：



.box


.shadow1


<


/style>


="box shadow1"


>


-10px<


/div>
2.v-shadow：這個值指定了陰影的垂直偏移量。即在y軸上陰影的位置。如果是正值陰影會出現在元素的上邊，如果是負值陰影會出現在元素的下邊。

正值：



.box


.shadow1


<


/style>


="box shadow1"


>


5px<


/div>
負值：



.box


.shadow1


<


/style>


="box shadow1"


>


-5px<


/div>
3、blur：這個值代表陰影的模糊半徑，如果是「0」意味著陰影是完全實心的，沒有任何模糊效果。該值越大，實心度越小，陰影越朦朧和模糊，該值不支援負數。

值為0：



.box


.shadow1


<


/style>


="box shadow1"


>


0px<


/div>
值不等於0：



.box


.shadow1


<


/style>


="box shadow1"


>


10px<


/div>
4.spread這個值代表著陰影的尺寸。這個值可以被看作是從元素到陰影的距離。如果正值會在元素的四個方向延伸陰影。負值會使陰影變得比元素本身尺寸還要小。預設值「0」會讓陰影變得得和元素的大小一樣。



.box


.shadow1


.shadow2


<


<


/style>


="box shadow1"


>


0px<


/div>


="box shadow2"


>


12px<


/div>
5.color：這個值是指定陰影的顏色



.box


.shadow1


.shadow2


<


/style>


="box shadow1"


>


0px<


/div>


="box shadow2"


>


20px<


/div>
以上在html檔案的主體body可以執行出來效果！！！

css3 邊框陰影 box shadow

box shadow是向盒子新增陰影。支援新增乙個或者多個。很簡單的一段 就實現了投影效果，酷斃了。我們來看下語法 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 引數介紹 注意 inset 可以寫在引數的第乙個或最後乙個，其它位置是無效的。為元素設...

css3 邊框圓角陰影漸變

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

css3背景漸變與邊框陰影

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