溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中border屬性怎么用

發(fā)布時(shí)間：2022-02-22 10:40:25 來(lái)源：億速云 閱讀：200 作者：小新 欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)CSS中border屬性怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

CSS 邊框
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
CSS border 屬性允許你規(guī)定元素邊框的 3 個(gè)方面：樣式、寬度，以及顏色。
通過(guò)使用 CSS 邊框?qū)傩?，我們可以?chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素。

邊框與背景
CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。
CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。
CSS2.1 則進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。
大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過(guò)一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。
提示：有些邊框是“間斷的”（如點(diǎn)線邊框），元素的背景會(huì)出現(xiàn)在邊框的可見部分之間。

邊框的樣式
樣式是邊框最重要的一個(gè)方面，樣式控制著邊框的顯示，如果沒有樣式，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個(gè)不同的非 inherit 樣式，包括 none。
例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：

a:link img {border-style: outset;}


定義多種樣式
您可以為一個(gè)邊框定義多個(gè)樣式（按照 top-right-bottom-left 的順序），例如：

p.aside {border-style: solid dotted dashed double;}

注釋：為 aside 定義邊框樣式：實(shí)線上邊框、點(diǎn)線右邊框、虛線下邊框和一個(gè)雙線左邊框。

定義單邊樣式
如果您希望為元素框的某一個(gè)邊設(shè)置邊框樣式，可以使用下面的單邊邊框樣式屬性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此這兩種方法是等價(jià)的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二種方法，必須把單邊屬性放在簡(jiǎn)寫屬性之后，否則將被簡(jiǎn)寫屬性覆蓋。

邊框的寬度
您可以通過(guò) border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：
指定長(zhǎng)度值，比如 2px 或 0.1em；或者使用關(guān)鍵字：thin 、medium（默認(rèn)值） 和 thick。
注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，由用戶代理樣式表（瀏覽器樣式）設(shè)置。

p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: thick;}


定義單邊寬度
您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以簡(jiǎn)寫為（這樣寫法稱為值復(fù)制）：

p {border-style: solid; border-width: 15px 5px;}

您也可以通過(guò)下列屬性分別設(shè)置邊框各邊的寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的規(guī)則與上面的例子是等價(jià)的：

p {
    border-style: solid;
    border-top-width: 15px;
    border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;
}


沒有邊框
在前面的例子中，如果希望顯示某種邊框，就必須設(shè)置邊框樣式，比如 solid 或 outset。
那么如果把 border-style 設(shè)置為 none 會(huì)出現(xiàn)什么情況：

p {border-style: none; border-width: 50px;}

注釋：盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。此時(shí)，邊框的寬度也會(huì)變成 0。
提示：如果邊框樣式為 none，即表示邊框根本不存在（無(wú)邊框），邊框?qū)挾茸詣?dòng)設(shè)置為 0。
注意：忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。例如，下面規(guī)則中 h2 元素不會(huì)有任何邊框：

h2 {border-width: 20px;}

由于 border-style 的默認(rèn)值是 none，如果沒有聲明樣式，就相當(dāng)于 border-style: none。
因此，如果您希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。

邊框的顏色
CSS 使用一個(gè)簡(jiǎn)單的 border-color 屬性來(lái)設(shè)置邊框顏色，它一次可以接受最多 4 個(gè)顏色值。
可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和 RGB 值：

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}

提示：如果顏色值小于 4 個(gè)，值復(fù)制就會(huì)起作用。
例如，下面的規(guī)則聲明了段落的上下邊框是藍(lán)色，左右邊框是紅色：

p {
    border-style: solid;
    border-color: blue red;
}

注釋：默認(rèn)的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設(shè)它是一個(gè)表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因?yàn)?color 可以繼承）。這個(gè)父元素很可能是 body、div 或另一個(gè) table。

定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
例如，要為 h2 元素指定實(shí)線黑色邊框，而右邊框?yàn)閷?shí)線紅色，可以這樣指定：

h2 {
    border-style: solid;
    border-color: black;
    border-right-color: red;
}


透明邊框
如果邊框沒有樣式，就沒有寬度。不過(guò)有些情況下您可能希望創(chuàng)建一個(gè)不可見的邊框。
CSS2 引入了邊框顏色值 transparent。這個(gè)值用于創(chuàng)建有寬度的不可見邊框。

<html>
<head>
<style type="text/css">
    a:link, a:visited {
        border-style: solid;
        border-width: 5px;
        border-color: transparent;
    }
    a:hover {border-color: gray;}
</style>
</head>
<body>
    <a href="#">AAA</a>
    <a href="#">BBB</a>
    <a href="#">CCC</a>
</body>
</html>

注釋：利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣，在你需要的時(shí)候使其可見。
注釋：這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)域（有可見背景時(shí)）。
提示：在 IE7 之前的版本不支持 transparent，IE 會(huì)根據(jù)元素的 color 值來(lái)設(shè)置邊框顏色。

所有邊框?qū)傩栽谝粋€(gè)聲明之中

<html>
<head>
<style type="text/css">
p {
    border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
    <p>Some text</p>
</body>
</html>

注釋：本例演示用簡(jiǎn)寫屬性來(lái)將所有四個(gè)邊框?qū)傩栽O(shè)置于同一聲明中。

設(shè)置邊框

p.one {border-style: solid}
p.two {border-style: solid double}
p.three {border-style: solid double groove}
p.four {border-style: solid double groove dotted}
p.B-width {
    border-style: solid;
    border-width: 5px 10px 1px medium
}
p.B-color {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
p.B-bottom {
    border-style: solid;
    border-bottom: thick dotted #ff0000;
}
p.other {
    border-style: solid;
    border-top-style: dotted;
    border-right-width: thin;
    border-bottom-color: #ff0000;
    border-left: thick double #ff0000;
}

注釋："border-width" 屬性單獨(dú)使用無(wú)效，請(qǐng)首先使用 "border-style" 屬性來(lái)設(shè)置邊框。
注釋："border-color" 屬性單獨(dú)使用無(wú)效，請(qǐng)首先使用 "border-style" 屬性來(lái)設(shè)置邊框。

CSS 邊框 屬性及描述
border：簡(jiǎn)寫屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。
border-style：用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。
border-width：用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。
border-color：設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。
border-top：簡(jiǎn)寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-right：簡(jiǎn)寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-bottom：簡(jiǎn)寫屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-left：簡(jiǎn)寫屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-left-color：設(shè)置元素的左邊框的顏色。
border-left-style：設(shè)置元素的左邊框的樣式。
border-left-width：設(shè)置元素的左邊框的寬度。

感謝各位的閱讀！關(guān)于“CSS中border屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手