CSS毛玻璃效果 取自Apple官網
效果取自apple官網的選單區域
純靠CSS達成毛玻璃效果
1 2 3 | -webkit-backdrop-filter: saturate(180%) blur(20px);backdrop-filter: saturate(180%) blur(20px);background-color: rgba(255,255,255,0.72); |
backdrop-filter屬性的內容
blur: 模糊
saturate: 飽和度
brightness: 明度
contrast: 對比度
drop-shadow: 陰影
grayscale: 灰階
hue-rotate: 色相
invert: 反轉
sepia: 棕褐色