On 16/01/2012 4:15 PM, Ghodmode wrote:
On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresley<a...@css-class.com>  wrote:

Not so. There needs to be a forth value in the box-shadow string to indicate
spread. Something like this spreads the shadow evenly on all sides.

box-shadow:0px 0px 0.5em 0.5em gray;

The spec goes into some detail in explaining the variations of box-shadow
(see example 29 and 30).

http://dev.w3.org/csswg/css3-background/#the-box-shadow

Unfortunately the webkit variation doesn't support the 4th number:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow

The blur radius will make the shadow appear on all four sides, though.

.box {
     -moz-box-shadow: 0 0 10px black;
     -webkit-box-shadow: 0 0 10px black;
     box-shadow: 0 0 10px black;
}


To my memory, all versions of Safari 5 has supported the forth value of spread. I have found the patch for it here [1] which was landed in late 2010 (over a year ago). A test case.

<!DOCTYPE html>

<style type="text/css">

p, div { width: 10em; margin: 3em; font-size: 200%; box-shadow: 0 0 0 1em black; }
div { box-shadow: 0 0 1em 1em black; }

</style>

<p>Some text shadow</p>

<div>Some text shadow</div>


1. https://bugs.webkit.org/show_bug.cgi?id=51448



--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to