css生成彩色陰影
阿新 • • 發佈：2019-01-14
image borde blur info absolute url radius ati src
通常用css生成單色或者同色系的的陰影（box-shadow)，其實可以通過巧妙的利用 filter: blur 模糊濾鏡，可以生成漸變色或者說是顏色豐富的陰影效果，如圖：
原理：
利用偽元素，生成一個與原圖一樣大小的新圖疊加在原圖之下，然後利用濾鏡模糊 filter: blur() 配合其他的亮度/對比度，透明度等濾鏡，制作出一個虛幻的影子，偽裝成原圖的陰影效果。
關鍵代碼：
filter: blur(10px) brightness(80%) opacity(.8)
完整示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.container {
width: 200px;
margin: 20px auto;
}
.avator {
position: relative;
width: 200px;
height: 200px;
border
css生成彩色陰影