Drop Shadows and round corners - Web Platform Docs Examples

dabblet.css

/**
 * Drop Shadows and round corners - Web Platform Docs Examples
 *
 * An example of drop shadow and round corners
 * "If the box has a nonzero ‘border-radius’, the shadow shape is rounded in the same way."
 *
 * @css-for	Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ 
 * @author	Giuseppe Gurgone
 * @see		http://docs.webplatform.org/wiki/css/properties/box-shadow 
 */
 
article {
/*	box-shadow: left-offset top-offset blur color; */
	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
	
	border-radius: 10px;
	
	border: 1px solid #f00;	/* 1px red border just to mark the edges of the article elem */

}

dabblet.html

<article>
	<h1>Drop Shadows and round corners - Web Platform Docs Examples</h1>
	<p>An example of drop shadow and round corners</p>
	<blockquote cite="http://www.w3.org/TR/css3-background/#box-shadow">If the box has a nonzero ‘border-radius’, the shadow shape is rounded in the same way.</blockquote>
	<footer role="contentinfo">
		<a href="http://docs.webplatform.org/wiki/css/properties/box-shadow">Learn more about Drop Shadows</a>
	</footer>
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}