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); /*考慮瀏覽器兼容性*/ -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5); } </style> </head> <body> <div></div> </body> </html>東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com
方法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>