CSS-好玩的樣式（用高斯模糊製作平緩突起）
阿新 • • 發佈：2020-07-15
一、效果圖：
應用：
二、上程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .effect{ width: 100%; height: 100%; padding-top: 50px; filter: contrast(10); background: #fff; } .blackball{ width: 200px; height: 100px; background: black; padding: 10px; margin: 0 0 0 240px; filter: blur(5px); }.redball{ width: 60px; height: 60px; background: red; padding: 10px; border-radius: 50%; position: absolute; top: 11px; left: 300px; filter: blur(5px); } </style> </head> <body> <div class="effect"> <div class="blackball"></div> <div class="redball"></div> </div> </body> </html>
最重要的就是這個blur 高斯濾波的東西，就是把尖的東西變得平緩（也就實現了兩個div接觸的尖角就會被平緩，達到平緩上凸的效果）