CSS怎麼新增陰影邊框？
css怎麼設定邊框陰影？很多人遇到這類問題都不知道怎麼處理，其實利用css加陰影邊框是很簡單的。在CSS中可以使用box-shadow屬性或filter屬性的drop-shadow()來新增陰影邊框。
方法1：使用box-shadow屬性
box-shadow屬性可以向框新增一個或多個陰影。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;屬性值：
● h-shadow：必需設定的值，定義水平陰影的位置。允許負值。
● v-shadow：必需設定的值，定義垂直陰影的位置。允許負值。
● blur：可選設定的值，定義模糊距離。
● spread：可選設定的值，定義陰影的尺寸。
● color ：可選設定的值，定義陰影的顏色。如果沒有設定值，顏色值基於瀏覽器顯示，建議設定。
● inset：可選設定的值，設定後可將外部陰影 (outset) 改為內部陰影。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 邊框陰影--box-shadow屬性</title>
<style>
.demo{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #007AFF;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
/*考慮瀏覽器 東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全
方法2：使用filter:drop-shadow()
filter屬性定義了元素(通常是<img>)的可視效果，可以將過濾器效果應用於web頁面上的元素。drop-shadow()函式對元素應用陰影效果；它接受h-shadow，v-shadow，blur，spread和color作為值。
語法：
filter:drop-shadow(h-shadow v-shadow blur spread color);● h-shadow：設定陰影的水平方向偏移量；允許負值，負值會使陰影出現在元素左邊。
● v-shadow：設定陰影的垂直方向偏移量；允許負值，負值會使陰影出現在元素上方。
● blur：設定陰影的模糊度，值越大，越模糊，陰影也就會變得更大更淡；不允許負值，若未設定，預設是0 (陰影的邊界很銳利)。
● spread：設定陰影的尺寸，正值會使陰影擴張和變大，負值會是陰影縮小；若未設定，預設是0 (陰影會與元素一樣大小)。
● color：設定陰影顏色；若未設定，顏色值基於瀏覽器，建議設定顏色。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 邊框陰影--filter:drop-shadow()</title>
<style>
.demo{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: pink;
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
/*考慮瀏覽器相容性：相容 Chrome, Safari, Opera */
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}
</style>
</head>
<body>
<div></div>
</body>
</html>