SEO

April 15, 2011

CSS Backgrounds and Borders Module Level 3

Below are some examples of an orange box with a blue border being being given a drop shadow.

border:5px solid blue; background-color:orange; width: 144px; height: 144px;
 
border-radius: 20px;
 
border-radius: 0;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
 A round-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. A square-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. 
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
 A round-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). A square-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). 
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
 A round-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. A square-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. 
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset
 A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border). A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border).

The ‘box-shadow’ property applies to the ‘::first-letter’ pseudo-element, but not the ‘::first-line’ pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

via w3.org

at