<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邊框屬性</title> <style> /*.box{ height: 100px; width: 100px; background-color: #3385ff; border-top:1px double #000; border-right:2px dashed red; border-bottom:3px outset white; border-left: 4px solid #000; }*/ .box{ height: 0px; width: 0px; border-width:25px; border-style:solid; border-color: red green blue purple; } .box{ height: 0px; width: 0px; border-width:25px; border-style:solid; border-color: red white white; border-bottom:none; } </style> </head> <body> <div class="box"></div> </body> </html>
效果圖如下：
在盒子模型中我們通常會給盒子設置邊框屬性，使之完成某些功能和樣式
我們會使用css中的border屬性來設置邊框
一般會通過連寫來設置border，他下面還有width,style,color的屬性，
在開發中，我們會使用連寫。
寫法1：（按照方向）
快捷鍵：bd+
border: 1px solid #000; 這樣的屬性設置，四個邊框屬性值是相同
當然我們也可以分別設置四個邊框的屬性：
快捷鍵：bdt+
border-top: 1px solid #000;
快捷鍵：bdr+
border-right: 2px solid #000;
快捷鍵：bdb+
border-bottom: 3px solid #000;
快捷鍵：
border-left: 4px solid #000;
其中的屬性分別是：width,style,color.
寫法2：（按照屬性）
border-width:1px 2px 3px 4px;
border-style:none dashed double dotted;
border-color:red green white black;
注意點：1.這四個屬性按照上右下左來賦值，順序不能錯。
2.這四個屬性值是可以省略的，例如，當你只寫上右下的時候，沒寫左邊
這時，左邊的屬性會按照右邊的屬性，當你沒設置下和右的時候，下會和上
一樣，左會和上一樣。當你只寫了第一個，那么這四條邊框會都會按照第一個
來取值。
寫法3：（單獨設置）
還可以單獨設置每條邊框單獨的屬性值，例如：
border-right-width:3px;
border-left-style:double;
border-bottom-color:red;
border-style有很多取值：
