<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box1{
/*
* 使用width來設置盒子內容區的寬度
* 使用height來設置盒子內容區的高度
*
* width和height只是設置的盒子內容區的大小，而不是盒子的整個大小，
* 盒子可見框的大小由內容區，內邊距和邊框共同決定
*/
width: 300px;
height: 300px;
/*設置背景顏色*/
background-color: #bfa;
/*
* 為元素設置邊框
* 要為一個元素設置邊框必須指定三個樣式
* border-width:邊框的寬度
* border-color:邊框顏色
* border-style:邊框的樣式
*/
/*
* 設置邊框的寬度
*/
/*border-width:10px ;*/
/*
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值，
則四個值會分別設置給 上 右 下 左，按照順時針的方向設置的
如果指定三個值，
則三個值會分別設置給 上 左右 下
如果指定兩個值，
則兩個值會分別設置給 上下 左右
如果指定一個值，則四邊全都是該值
除了border-width，CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left
專門用來設置指定邊的寬度
* */
/*border-width:10px 20px 30px 40px ;*/
/*border-width:10px 20px 30px ;*/
/*border-width: 10px 20px ;*/
border-width: 10px;
/*border-left-width:100px ;*/
/*
* 設置邊框的顏色
* 和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色
* border-xxx-color
*/
border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
/*
* 設置邊框的樣式
* 可選值：
* none，默認值，沒有邊框
* solid 實線
* dotted 點狀邊框
* dashed 虛線
* double 雙線
*
* style也可以分別指定四個邊的邊框樣式，規則和width一致，
* 同時它也提供border-xxx-style四個樣式，來分別設置四個邊
*/
/*border-style: double;*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
