Box Shadow
WebKit now supports the CSS3 box-shadow property (as -webkit-box-shadow). This property allows you to specify a shadow effect that will be applied to the border box of an object. The syntax of the shadow is identical to text-shadow.
Some fun facts about the feature:
(1) It works with table cells, so you can make a nice evenly spaced grid of shadowed cells.
(2) It works with first-letter and first-line, so you can create a nice raised effect on floating first-letter boxes now.
(3) It works on inline flows that span multiple lines.
(4) If you specify a border-radius, the box-shadow will respect the curvature of the border-radius.
Here’s an example of a table cell grid that has shadows on all the cells.
Cell | Cell | Cell |
Cell | Cell | Cell |
Cell | Cell | Cell |
Cell | Cell | Cell |
Cell | Cell | Cell |
Report bugs at bugs.webkit.org.