box-shadow:inset doesn’t work in Safari 5.1?

[Billy]

-webkit-box-shadow:inset

-moz-box-shadow:inset

box-shadow:inset

don’t seem to work in Safari 5.1, though

-webkit-box-shadow:

-moz-box-shadow:

box-shadow:

does work.

Any other way to have an “inner shadow”?

[chrisburton]

@cyneWATCH – Did you actually add more code than just inset? Where are the colors?

Tip: https://css-tricks.com/snippets/css/css-box-shadow/

[Billy]

display: block;

margin: 0 0 20px;

width: 122px;

height: 35px;

border-right: solid 1px #666666;

text-align: center;

font-size: 13px;

color: #eeeeee;

font-family: "Myriad Pro", Helvetica, sans-serif;

line-height: 35px;

float: left;



text-shadow:

0px -1px 0 #444444,

0px -1px 0 #444444,

0px 0px 0 #444444,

0px 0px 0 #444444;



-webkit-border-top-left-radius: 4px;

-moz-border-top-left-radius: 4px;

border-top-left-radius: 4px;

-khtml-border-top-left-radius: 4px;

-webkit-border-bottom-left-radius: 4px;

-moz-border-bottom-left-radius: 4px;

border-bottom-left-radius: 4px;

-khtml-border-bottom-left-radius: 4px;



background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#878788), to(#676767));

background-image: -webkit-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);

background-image: -moz-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);

background-image: -ms-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);

background-image: -o-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);



-moz-box-shadow:inset 10px 10px 10px #888888;

-webkit-box-shadow:inset 10px 10px 10px #888888;

box-shadow:inset 10px 10px 10px #888888;



-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;

-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;

box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;

[joshuanhibbert]

The second set of box-shadow rules overrides the first, and they don’t have inset declared. Also, no need for the first set of rules as browsers that support box-shadow support rgba/hsla.

[Billy]

That’s weird; because it did what I wanted in Safari on Snow Leopard.
I guess I could add a class for the insets. Would that work?

[chrisburton]

@cyneWATCH – If you’d like multiple box-shadows on one element, use a comma.
You can also remove -webkit-border-radius as webkit supports non-prefix.

[Billy]

ok thanks

[chrisburton]

@cyneWATCH – does that solve your issue?

[Billy]

yes thank you. You’ve helped me again.

[Author]

Posts