Safari box shadow inset support

问题:

I have a box in one of my websites that has a these property:

-moz-box-shadow:inset 0 0 50px #ecf4de;
-webkit-box-shadow:inset 0 0 50px #ecf4de;
box-shadow:inset 0 0 50px #ecf4de;

This gives the box a nice gradient towards the center. However, Safari does not support the "inset" property and IE doesn't support box-shadow at all. I can't use an image for this because the height of this box changes for each situation.

I don't want to use 3 images, (one for the top, a repeating one for the middle and one for the bottom), as this can get very messy code.

So what I'm asking is if there is any way to produce the box shadow in all browsers.

EDIT: Anybody know of some javascript snippet that could possibly do this? Just wondering...

回答1:

The latest Webkit build (and probably many before) has support for inset. It will probably get to Safari for the next release.

However, you won't be able to do it on all browsers without the three images trick. Internet Explorer's not going to collaborate with you otherwise.

That being said, I don't think your goal should be to get identical results in all browsers. I think you should get decent results in all browsers, but it's normal that web pages in Safari or Firefox look better than in Internet Explorer 7. Besides, only web geeks compare web page rendering across different browsers.

回答2:

Agreed; to be honest, I've no qualms about leaving my pages looking blander and blockier on Internet Explorer than superior browsers. The content is still readable, accessible, and navigable: but screw getting it pixel perfect between browsers. If anything, it'll just give Microsoft all the more incentive to improve their browser's support for CSS3.

Personally, I think the inset flag is one of the most awesome features being promised by box-shadows... aside from giving elements a depressed, "cut-out" effect, inset shadows can also be used to create glowing edges and angled shading, an effect that can't be easily achieved using straight background gradients (especially with rounded edges). Being able to inset shadows opens up a whole wealth of opportunities for web design.

Knowing that Safari didn't support it had me worrying it might be dropped from the spec at some point: God knows there's no reason to drop something so useful. >_>

回答3:

inset Safari 5.0 support

http://www.css3.info/preview/box-shadow/

回答4:

You may have more luck with the 'Overlay Method', the first of Jordon Dobsons's techniques here, which uses radial gradients.

But it does still require a height and width on the image (especially in Chrome).

/* Overlay Method */

figure.overlay::after{
  position:               absolute;
  top:                    0;
  bottom:                 0;
  left:                   0;
  right:                  0;
  content:                "";
  z-index:                2;

  pointer-events:         none; /* "all" disables mouse access to image */

/* Mozilla Setting */
  background-image:       -moz-radial-gradient(
    center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px
  );

/* Webkit Setting */
  background-image:       -webkit-gradient(
    radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))
    );
}