整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
border-style屬性用來定義邊框的樣式。
border-style的值：
（1）編輯代碼
打開記事本，編寫其代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
網頁中，邊框隨處可見，任何塊元素和行內元素都可以設置邊框屬性。例如，div元素可以設置邊框，img元素也可以設置邊框，table元素也可以設置邊框，span元素同樣也可以設置邊框等等。
目標
一個元素的邊框，同時設置邊框的寬度border-width、邊框的外觀border-style和邊框的顏色border-color這三個屬性值。
邊框
在CSS中，使用border-width屬性來定義邊框的寬度。
語法：border-width:像素值;
像素值越大，則線條越大。
不同大小的邊框寬度
在CSS中，使用border-style屬性來定義邊框的外觀
語法：border-style:屬性值;
屬性值有很多種，常用的只有實線和虛線
屬性值
常用的是實線邊框和虛線邊框
各式各樣的邊框外觀
在CSS中，使用border-color屬性來定義邊框的顏色
語法：border-color:顏色值;
說明：顏色值是一個關鍵字或一個16進制的RGB值。
有顏色的邊框
在實際中，一般都會使用簡寫，就要按照順序來設置屬性：border-width、border-style、border-color。
單獨設置邊框要素，寫法很繁瑣
沒有使用簡寫
使用簡寫法，方便簡潔
使用了簡寫
可以分別針對上下左右四條邊框設置單獨的樣式
border-top（上邊框）、border-bottom（下邊框）、border-left（左邊框）、border-right（右邊框）
單獨設置
個性的邊框
order 盒子邊框
復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色
語法：border: border-width | border-style | border-color ;
邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。
邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可為盒子邊框設置樣式，以下示例為實線
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代碼
如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓
使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代碼
如果需要設置不同方向的邊框粗細，可以寫在一句 CSS 代碼里。
比如說下面這段代碼，上下2px，右2px，左5px。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接輸入
顏色的英文名稱
rgb值
十六進制
使用 border-color 可為盒子邊框設置顏色，以下示例邊框顏色為紅色。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代碼
上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。
如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。
例如：
/* CSS代碼 */
div{
border-top: 5px solid red;
}這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色
border-top 包含了：
其他同理
先來看一個示例
/* CSS代碼 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
細心的你，一定發現了 border 的邊框四條邊交接處是斜角。
此刻我們把盒子的寬高設置為 0
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四個三角形一樣。
我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。
為 border-color 指定 transparent 值，使盒子邊框顏色變透明
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三條邊透明之后，就只剩一個三角形了。
完
部分資料引用自：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
