CSS filter drop-shadow All In One
CSS 滤镜投影
drop-shadow
drop-shadow(offset-x offset-y blur-radius color)
px
/* Black shadow with 10px blur */
drop-shadow(16px 16px 10px black)
rem
/* Reddish shadow with 1rem blur */
drop-shadow(.5rem .5rem 1rem #e23)
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
<color>
/* Named colors */
rebeccapurple
aliceblue
/* RGB Hexadecimal */
#f09
#ff0099
/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)
/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)
/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)
/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)
/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)
/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)
/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
demos
背景虚化 / 光晕特效
(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！
refs
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ?️，侵权必究⚠️！