Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

css - CSS3 filter: drop-shadow spread property alternatives

I'm trying to use a CSS3 (webkit) drop-shadow filter to place a white glow around any given transparent png with approximately the same dimensions, and -webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8)); is working great for solid images. The problem is that it mangles images that are primarily text somewhat horribly. All the shadows blend together instead of creating a proper tight glow effect.

enter image description here

I need to be able to use spread instead of blur so that the shadows don't just become a big blob behind some of the text, but apparently while the standard says that you should be able to specify a spread property, you still can't.

I've heard that SVG drop shadow filter can be used to achieve the same effect as drop-shadow (and in fact must be used in Firefox) but I haven't been able to find a way to apply a spread property to that either.

What kind of workarounds exist for this problem, if any?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Another way to achieve the the feeling of spread is use multiple drop-shadow filters.

filter:  
  drop-shadow(1px 1px 2px white)
  drop-shadow(-1px -1px 2px white)
  drop-shadow(1px -1px 2px white)
  drop-shadow(-1px 1px 2px white)
  drop-shadow(1px 0px 2px white) 
  drop-shadow(-1px 0px 2px white)  
  drop-shadow(0px 1px 2px white) 
  drop-shadow(0px -1px 2px white);

This results in a hard white border with a normal softer dropshadow behind it. Stacking more of the same color can give the desired results as the original question.

White border using multiple dropshadows


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...