css邊框陰影怎麼設定？
我們在網頁設計中，通常會使用ps工具來達到圖片或者邊框陰影、立體等效果。但是如果一些基礎效果都需要用p圖來完成那就顯得效率比較低了。其實可以使用css來設定邊框陰影，下面本篇文章來給大家介紹一下。
在css中，我們可以通過box-shadow屬性來設定邊框陰影。
box-shadow屬性可以向邊框新增一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;取值：
-
h-shadow：必需設定的值，定義水平陰影的位置。允許負值。
-
v-shadow：必需設定的值，定義垂直陰影的位置。允許負值。
-
blur：可選設定的值，定義模糊距離。
-
spread：可選設定的值，定義陰影的尺寸。
-
color ：可選設定的值，定義陰影的顏色。如果沒有設定值，顏色值基於瀏覽器顯示，建議設定。
-
inset：可選設定的值，設定後可將外部陰影 (outset) 改為內部陰影。
css3邊框陰影程式碼示例如下：
1、box-shadow屬性實現邊框外陰影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3邊框陰影</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
div 此段HTML程式碼中，我們給div添加了一個box-shadow的樣式屬性，並且引數分別設定為5px 5px 10px 5px #ccc。
說明：由於沒有設定inset（內陰影）引數，預設為外陰影。
2、box-shadow屬性實現邊框內陰影
在上述HTML程式碼的基礎上，我們將box-shadow樣式屬性的值進行一些變化：
box-shadow:5px 5px 10px 5px #ccc inset;3、box-shadow屬性實現圓柱形效果
box-shadow:0px 5px 10px 10px #ccc inset;這裡我們將水平方向陰影位置設定為0個畫素點並且設定內陰影。
注：box-shadow屬性中，前兩個引數可以為負值並且是必須存在，而後面的引數則都是可選的。
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com