5、 邊框樣式
5.1簡寫方式
border:width style color;
5.2單邊定義
border-left/right/top/bottom:width style color;
5.3單邊寬度border-width
border-left/right/top/bottom-width;
5.4單邊樣式border-style
border-left/right/top/bottom-style;
5.5單邊顏色border-color
border-left/right/top/bottom-color;
5.6案例
input.btn{height:30px; width:80px; color:black; background:#f0f0f0;
border-left:2px solid #fff; border-top:2px solid #fff;
border-right:2px solid #6a6a6a; border-bottom:2px solid #6a6a6a;
background:#c0c0c0; }
6、 框模型
框模型（box modal）定義了元素邊框、內容、其他元素之間的內邊距和外邊距的問題。
6.1 框模型圖
6.2 width和height
指定內容域的寬度和高度。
6.3邊框、內外邊距對元素尺寸的影響
增加內邊距、邊框和外邊距不會影響內容域的尺寸，但是會增加元素框的總尺寸。
6.4案例
#box{ width:70px;margin:10px;padding:5px }
u 注意事項：注意元素所佔面積的變化。
6.5內邊距
和內容元素之間的距離。
1）語法：padding:30px;
2）單邊設置：padding-left/top/right/bottom:30px;
3）簡寫方式：①padding:10px 20px; 上下 左右
②padding:10px 20px 30px 40px; 順時針，上右下左
6.6外邊距
與下一個元素之間的空間量。
1）語法：margin:30px;
2）單邊設置：margin-left/top/right/bottom:30px;
3）簡寫方式：①margin:10px 20px; 上下 左右
②margin:10px 20px 30px 40px; 順時針，上右下左
4）特殊寫法：margin:0px auto; 對matgin而言，margin可取值爲auto，使某個框居中顯示；屏幕寬度減去元素寬度，除以2，左右平分
7、背景樣式
7.1背景色
background-color:顏色;
7.2背景圖像
background-image:url(a.jpg);/*注意，url裏沒有雙引號*/
7.3背景平鋪
background-repeat:repeat（默認的）/no-repeat/repeat-x/repeat-y;
7.4背景固定
background-attachment:scroll/fixed;/*scroll:背景和內容一起滾動;fixed:背景固定，類似於水印的效果，走到哪跟到哪*/
7.5背景定位
background-position:left top;/*可寫px、%、center單詞*/
7.6組合設置
background:background-color || background-image || background-repeat
|| background-attachment || background-position;
7.7案例
background:#9dcdfe url(a.jpg) no-repeat fixed left top;
u 注意事項：
v 如使用組合屬性定義其單個參數，則其他參數的默認值將無條件覆蓋各自對應的單個屬性設置。比如設置background:white等價於設置
background:white none repeat scroll 0% 0%
如果在此之前設置background-image屬性，則其設置將被background-image
的默認值none覆蓋。
v <img style="background-image:url(images/logo.png);border:1px solid red;" />
錯誤，img沒有佔一定的面積、空間，所以不能設置背景。