盒子模型（邊框）
阿新 • • 發佈：2021-07-01
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ /* width內容區寬度 height 內容區高度 width和height只是設定盒子內容區大小，不是盒子整個大小 盒子可見框的大小由內容區，內邊距和邊框共同決定*/ width: 100px; height: 100px; background-color: #bfa; /* 為元素設定邊框 元素設定邊框必須指定三個樣式 除了border-width還有四個border-xxx-width xxx值可能是top right bottom left設定指定邊框寬度 border-width：邊框寬度（可以分別指定四個邊框的寬度） 四個值分別設定上右下左 如果指定三個值給上 左右 下 border-width：10px 20px 30px 指定兩個值分別給上下 左右 以上樣式同樣適用於以下三種 border-width：10px 20px border-color：邊框顏色 border-style：邊框樣式 可選值：solid 實線 none 預設值無邊框 dotted 點狀邊框 dashed 虛線 double 雙線*/ /* border: 3px solid #000000; */ /* border-style: outset; */ } </style> </head> <body> <div class="box1"> </div> </body> </html>
border-width 邊框寬度 可分別指定四個邊框的寬度 四個值設定給上 右 下 左
border-color 邊框顏色
border-style 邊框樣式
可選值 solid 實線
none 預設無邊框
dotted 點狀邊框
dashed 虛線
double 雙線