iiic/Debug-styl-v-css.html

## Debug-styl-v-css.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
div {
margin:40px auto 0 auto;
position:relative;
width:600px;
height:326px;
background:#ccc;
overflow:hidden;
}
footer {
margin:0 auto;
position:relative;
width:600px;
height:326px;
background:blue;
}
//.debug {
background:green;
box-shadow:10px -10px red, 10px 10px red, -10px 10px red, -10px -10px red;
}
.debug::outside { border:1px solid teal; }
</style>
</head>
<body>
<div class="debug">
Lorem ipsum dolor sit amet consectetuer nec porta est ut tincidunt. Dolor Pellentesque feugiat Vestibulum dolor Aenean a Vestibulum ante at sit. Ligula tortor libero vitae convallis pede semper auctor condimentum augue parturient. Neque enim tempus vitae consequat tellus nisl suscipit malesuada ullamcorper velit. Nec id ac neque justo sem ac malesuada est amet eget. Nascetur mauris vitae ac et mollis.
Pretium feugiat sed Donec neque est Curabitur velit netus tortor lacinia. Velit Nullam consectetuer Aliquam condimentum nibh eu magna quis convallis parturient. Donec ligula eu Vestibulum vitae quis sed lorem risus sit Vestibulum. Mus eget et consectetuer pellentesque Nullam Nulla elit Nulla ante a. Tempus feugiat hendrerit eget sit non sed pede facilisis ligula Vestibulum. Laoreet a interdum fermentum felis adipiscing in tellus faucibus Phasellus vel. Pede arcu.
Nec turpis ac Integer Nam convallis amet semper Sed elit hac. Pellentesque elit ridiculus facilisis lacus wisi vitae tristique urna In nibh. Convallis odio Nunc amet volutpat et Nullam sociis Nullam massa felis. Leo at nisl elit vitae tincidunt mauris venenatis tincidunt Nunc pretium. Nisl ante sem commodo sit enim id adipiscing Nam adipiscing id. Ut Maecenas porttitor Quisque Nulla in fames.
Semper laoreet laoreet nulla pellentesque pharetra Curabitur sollicitudin semper justo wisi. Fringilla ridiculus platea ipsum Quisque mi quis nunc a condimentum Aenean. Tellus dolor quam Pellentesque ante auctor justo vitae Curabitur pede laoreet. Et Morbi orci condimentum tempus orci felis sem sodales dolor turpis. Pellentesque Curabitur aliquam nonummy pretium et turpis Nam faucibus wisi tellus. Maecenas ut leo lorem aliquam justo aliquet magna justo adipiscing Quisque. Ut nisl.
</div>
<footer>
patička
</footer>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	div {
	margin:40px auto 0 auto;
	position:relative;
	width:600px;
	height:326px;
	background:#ccc;
	overflow:hidden;
	}
	footer {
	margin:0 auto;
	position:relative;
	width:600px;
	height:326px;
	background:blue;
	}
	//.debug {
	background:green;
	box-shadow:10px -10px red, 10px 10px red, -10px 10px red, -10px -10px red;
	}
	.debug::outside { border:1px solid teal; }
	</style>
	</head>
	<body>
	<div class="debug">
	Lorem ipsum dolor sit amet consectetuer nec porta est ut tincidunt. Dolor Pellentesque feugiat Vestibulum dolor Aenean a Vestibulum ante at sit. Ligula tortor libero vitae convallis pede semper auctor condimentum augue parturient. Neque enim tempus vitae consequat tellus nisl suscipit malesuada ullamcorper velit. Nec id ac neque justo sem ac malesuada est amet eget. Nascetur mauris vitae ac et mollis.
	Pretium feugiat sed Donec neque est Curabitur velit netus tortor lacinia. Velit Nullam consectetuer Aliquam condimentum nibh eu magna quis convallis parturient. Donec ligula eu Vestibulum vitae quis sed lorem risus sit Vestibulum. Mus eget et consectetuer pellentesque Nullam Nulla elit Nulla ante a. Tempus feugiat hendrerit eget sit non sed pede facilisis ligula Vestibulum. Laoreet a interdum fermentum felis adipiscing in tellus faucibus Phasellus vel. Pede arcu.
	Nec turpis ac Integer Nam convallis amet semper Sed elit hac. Pellentesque elit ridiculus facilisis lacus wisi vitae tristique urna In nibh. Convallis odio Nunc amet volutpat et Nullam sociis Nullam massa felis. Leo at nisl elit vitae tincidunt mauris venenatis tincidunt Nunc pretium. Nisl ante sem commodo sit enim id adipiscing Nam adipiscing id. Ut Maecenas porttitor Quisque Nulla in fames.
	Semper laoreet laoreet nulla pellentesque pharetra Curabitur sollicitudin semper justo wisi. Fringilla ridiculus platea ipsum Quisque mi quis nunc a condimentum Aenean. Tellus dolor quam Pellentesque ante auctor justo vitae Curabitur pede laoreet. Et Morbi orci condimentum tempus orci felis sem sodales dolor turpis. Pellentesque Curabitur aliquam nonummy pretium et turpis Nam faucibus wisi tellus. Maecenas ut leo lorem aliquam justo aliquet magna justo adipiscing Quisque. Ut nisl.
	</div>
	<footer>
	patička
	</footer>