1.box-shadow屬性除了常用於陰影效果、卡片等基礎使用外，還可以用於實現比較炫酷的特效；
類似這樣的想過都是可以通過box-shadow屬性制作的；資料來源於CSDN：很小白的小白
附上他的代碼，
<!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> *{ margin: 0px; padding: 0px; } body{ background: #000; } div{ width: 300px; height: 300px; position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); border-radius: 50%; box-shadow: inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 0px 0px 150px #f0f, inset -10px 0px 150px #0ff, 0px 0px 50px #fff, -10px 0px 50px #f0f, 10px 0px 50px #0ff; } </style> </head> <body> <div></div> </body> </html> ———————————————— 版權聲明：本文為CSDN博主「很小白的小白」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/qq_35401191/article/details/86666497
通過inset屬性，制造內陰影和不加inset屬性制作外陰影；然后對等的10PX -10PX 用不同的顏色，可以讓左右效果對稱又炫彩；第三個PX我調了一下，應該是spread 陰影的大小；
他這個調的已經挺好看的，我是直接拿來用了；
2.CSS+DIV可以制作動態的很可愛的icon圖樣，如圖所示
其中下雨的效果代碼：
STEP1: 整體HTML架構 <div class="icon rainy"> <div class="cloud"></div> <div class="rain"></div> </div> STEP2: 用CSS繪制雲朵圖標 CSS代碼如下 body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; font-family: 'Roboto', sans-serif; text-align: center; background-color: currentColor; } .icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */ } .cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .cloud:nth-child(2):after { background: #fff; } .rain{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor; } .rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; /*設置動畫 rain */ } STEP3: 下雨動畫 /* 下雨動畫 Animations */ @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } }
代碼來源於：https://mp.weixin.qq.com/s?src=3×tamp=1577761115&ver=1&signature=ORKpJuGleWEShD7zQ-50LmtGSsjAQK-kiHIFR7PY8TKMcMKiJjPrIPOMwPx4P4a-IsnECk6ZtSToTlqzLytFsSShJHVYbU*LNKcdviDybbM7Qbs0ud5-aJv1VPp0bZ77YcIEZBz4BAMIKyaXDNULjwySojjEEJbH0dkmYAnMGBo=
不過好像復制打開過期了，是來源於微信推送的；
這個效果使用的地方目前我還沒有用到，其實感覺代碼挺多的，嗯就不是很方便使用；然后，現在前端的圖片基本都是直接PS摳圖或者iconfont里面找的圖片放上去的，可能是目前的工作環境如此，也許以后能用到吧。