zerolab-fe / one-question-per-day

每天一个小问题
21 stars 7 forks source link

CSS用drop-shadow来识别一个元素的轮廓 #127

Open wlin00 opened 3 years ago

wlin00 commented 3 years ago

当我们给一个div设置绝对定位的伪元素后,会发现div上的box-shadow不会成功设置给伪元素,如图: image

这时,可以使用filter: drop-shadow解决,效果如下:

  filter: drop-shadow(0 0 2px #000);

image

filter:drop-shadow的兼容性相对box-shadow较差,仅在chrome 21+、Safari 6、ios 6下的Safari等浏览器支持。