前端基礎---盒子模型-邊框
阿新 • • 發佈：2021-06-30
<!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: orange; /* 為元素設定邊框 腰圍一個元素設定邊框必須指定3個樣式 border-width: 邊框的寬度 border-color: 邊框顏色 border-style: 邊框的樣式*/ border: 1px black solid; /* 使用border-width可以分別指定四個邊框的寬度 如果在border-width指定了四個值 則四個值分別設定給 上 右 下 左,按照順時針的方向設定的 如果指定三個值 則這三個值會分別分配給 上 左右 下 如果指定兩個值 則這兩個值會分別設定給 上下 左右*/ border-width: 10px 20px 30px 40px; /* 除了border-width,css中還提供了四個border-xxx-width xxx的值可能是top right bottom left 專門用來設定指定的寬度 */ border-left-width: 40px; /* 設定邊框的顏色 和寬度一樣,color也是體況四個方向的樣式,可以分別指定顏色 border-xxx-color */ border-color: red yellow green blue; /* 設定邊框的樣式 可選值: none 預設值沒有邊框 solid 實線 dotted 點狀邊框 dashed 虛線 double 雙線 style也可以分別指定四個邊的邊框樣式,規則和width一致 同時他也提供border-xxx-style四個樣式,分別設定四個邊 */ border-style: double; } </style> </head> <body> <div class="box1"> </div> </body> </html>