HTML 中的 box-border 盒子邊框詳解

order 盒子邊框

復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色

語法：border: border-width | border-style | border-color ;

邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。

邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。

初始 HTML

 <!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 代碼

上邊：border-top-style: double; （雙線）
右邊：border-right-style: solid; (實線)
下邊：border-bottom-style: dashed; (虛線)
左邊：border-left-style: dotted; (點線)

border-style 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0，本屬性將失去作用。

如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。

 /* CSS代碼 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 樣式屬性值

屬性值解釋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 代碼

上邊：border-top-width: 10px; （雙線）
右邊：border-right-width: 10px; (實線)
下邊：border-bottom-width: 10px; (虛線)
左邊：border-left-width: 10px; (點線)

border-width 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-style設置為none或hidden，border-width的使用值將為0。

如果需要設置不同方向的邊框粗細，可以寫在一句 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-top-color: 10px;
右邊：border-right-color: 10px;
下邊：border-bottom-color: 10px;
左邊：border-left-color: 10px;

border-color 說明

如果提供全部四個參數值，將按上、右、下、左的順序作用于四邊。
如果只提供一個，將用于全部的四邊。
如果提供兩個，第一個用于上、下，第二個用于左、右。
如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
如果border-width等于0或border-style設置為none，本屬性將被忽略。

上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。

border 是復合屬性

如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。

例如：

 /* CSS代碼 */
 div{
     border-top: 5px solid red;
 }

這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 畫個三角形

先來看一個示例

 /* 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;
 }

效果：

把另外三條邊透明之后，就只剩一個三角形了。

完

部分資料引用自：

http://caibaojian.com/css3/properties/border/index.htm

邊框可以是圖片img，也可以是div元素，也可以是table，也可以是span

一、邊框樣式的三要素：

1、邊框的寬度 border-width

2、邊框的外觀 border-style

3、邊框的顏色 border-color

二、邊框屬性

語法：

border-width：像素值；
border-style: 屬性值；none 無樣式、dashed虛線、solid實線
border-color:關鍵字或者RGB值。

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
	width=100px;
	height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;	
}
</style>
	</head> 
	<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>

	</body>
</html>

邊框三個屬性簡寫

語法：

border:1px solid red;
等價于
border-width:1px;
border-style: solid;
border-color:red;

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
	</head> 
	<body>
<div>你好，嘻嘻</div>
	</body>
</html>

三、局部樣式

一個框有四個邊，如果想單獨設置一個邊就需要單獨設定

1、上邊框border-top

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡寫為：
border-top: 1px solid red;

2、下邊框border-bottom

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡寫為：
border-bottom: 1px solid red;

3、左邊框border-left

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡寫為：
border-left: 1px solid red;

4、右邊框border-right

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡寫為
border-right: 1px solid red;

整體舉例

人可能會疑惑，我為什么專門用一節內容來說邊框和圓角。其實，不為別的，只為它們在開發中，在Web系統中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過border和其延伸的，如border-style，來實現邊框的效果。上邊框相關的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對應的單詞即可。

邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種，不常用的有groove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統一設置四條邊框<br/>
    順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設置，風格可不同<br/>
    順序為:上、右、下、左。<br/>
    1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨一天邊框進行設置<br/>
    border-top：頂部寬度、樣式、顏色，一起設置<br/>
    border-top-width:上邊框寬度；<br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結果

11.2 圓角風格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內容

/*4個角統一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨指定一個角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<br/><br/>
<div class="four-radius">
    統一設置4個圓角<br/>
    一個值： 四個圓角值相同;<br/>
    兩個值: 左上角與右下角，右上角與左下角;<br/>
    三個值: 左上角, 右上角和左下角，右下角;<br/>
    四個值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨指定某個角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結果

11.3 圓角邊框

不要重復造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實現圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內容

<div class="corners">
    邊框屬性和圓角屬性，組合成圓角邊框
</div>

輸出結果

好了，有關CSS的圓角邊框內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

在線咨詢

上一篇：2分鐘了解 HTML 的基本結構和語法規則
下一篇：HTML 文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 中的 box-border 盒子邊框詳解

初始 HTML

邊框樣式

可單獨針對某一方向設置邊框樣式

border-style 說明

border-style 樣式屬性值

邊框粗細

可單獨針對某一方向設置邊框粗細

border-width 說明

邊框顏色

可單獨針對某一方向設置邊框顏色

border-color 說明

border 是復合屬性

教你用 CSS 畫個三角形

11.1 邊框逼格

11.2 圓角風格

11.3 圓角邊框

您的項目需求