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