<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>W3sCSS盒子模型</title> ???<!--其实就是div加css样式设计出一些逻辑页面--> ???<link rel="stylesheet" href="tzy.css" type="text/css"></head><body style="margin: 0px"><!--取消身体外层的外边框--><img src="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" alt="盒子模型图片"><!--padding设置所有内边距————padding-botton设置内低边距--left设置内左边距--><!--right设置内右边距————top设置内上边距--><table border="1" cellpadding="100px"cellspacing="10"> ???<tr> ???????<td>0</td> ???</tr></table><table border="1"> ???<tr> ???????<td id="td1">1</td> ???</tr></table><table border="1"> ???<tr> ???????<td id="td2">2</td> ???</tr></table><table border="1"> ???<tr> ???????<td id="td3">3</td> ???</tr></table><table border="1"> ???<tr> ???????<td id="td4">4</td> ???</tr></table><p>边框效果</p><div class="tzy">阴影效果</div><div class="ttzy">外边距</div><div class="container"> ???<div class="bd"> ???????<div class="pd"> ???????????<div class="content">Hello</div> ???????</div> ???</div></div></body></html>
#td1{ ???padding-bottom: 100px;}#td2{ ???padding-left: 100px;}#td3{ ???padding-right: 100px;}#td4{ ???padding-top: 100px;}p{ ???border-style: double; ???border-top-style: solid; ???border-bottom-style: hidden; ???border-left-style: dotted; ???border-right-color: aqua; ???border-bottom-width: 10px; ???/*border-style 定义了10个不同的非继承的样式边框包括none（空）*/ ???/*单边加上下左右就可以设置*/ ???/*border-width边框宽度*/ ???/*单边加上下左右就可以设置*/ ???/*border-color边框颜色 */ ???/*单边加上下左右就可以设置*/ ???border-radius:50px; ???width: 100px; ???height: 50px; ???/*设置圆角 ?边框四角弧度*/ ???background-color: bisque; ???text-align: center; ???/*border: 2px solid blue;*/ ???/*一般设置方法*/}.tzy{ ???color: blue; ???background-color: aqua; ???width: 100px; ???height: 100px; ???text-align: center; ???box-shadow: 10px 10px 15px #FF00FF; ???/*阴影效果*/}.ttzy{ ???background-color: bisque; ???width: 100px; ???height: 100px; ???margin: 100px; ???/*margin居上和左为100PX margin也有上下左右属性*/}.container{ ???/*外边框*/ ???margin: 100px;}.bd{ ???/*边框*/ ???border-style: double;}.pd{ ???/*内边距*/ ???padding: 100px;}.content{ ???background-color: #FF00FF;}HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表
原文地址：http://www.cnblogs.com/ttzzyy/p/7512998.html