溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS中border屬性怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
CSS 邊框
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的 3 個方面：樣式、寬度，以及顏色。
通過使用 CSS 邊框屬性，我們可以創建出效果出色的邊框，并且可以應用于任何元素。
邊框與背景
CSS 規范指出，邊框繪制在“元素的背景之上”。
CSS2 指出背景只延伸到內邊距，而不是邊框。
CSS2.1 則進行了更正：元素的背景是內容、內邊距和邊框區的背景。
大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。
提示：有些邊框是“間斷的”（如點線邊框），元素的背景會出現在邊框的可見部分之間。
邊框的樣式
樣式是邊框最重要的一個方面，樣式控制著邊框的顯示，如果沒有樣式，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。
例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：
a:link img {border-style: outset;}
定義多種樣式
您可以為一個邊框定義多個樣式（按照 top-right-bottom-left 的順序），例如：
p.aside {border-style: solid dotted dashed double;}注釋：為 aside 定義邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
定義單邊樣式
如果您希望為元素框的某一個邊設置邊框樣式，可以使用下面的單邊邊框樣式屬性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此這兩種方法是等價的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后，否則將被簡寫屬性覆蓋。
邊框的寬度
您可以通過 border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：
指定長度值，比如 2px 或 0.1em；或者使用關鍵字：thin 、medium（默認值） 和 thick。
注釋：CSS 沒有定義 3 個關鍵字的具體寬度，由用戶代理樣式表（瀏覽器樣式）設置。
p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: thick;}
定義單邊寬度
您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}上面的例子也可以簡寫為（這樣寫法稱為值復制）：
p {border-style: solid; border-width: 15px 5px;}您也可以通過下列屬性分別設置邊框各邊的寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的規則與上面的例子是等價的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
沒有邊框
在前面的例子中，如果希望顯示某種邊框，就必須設置邊框樣式，比如 solid 或 outset。
那么如果把 border-style 設置為 none 會出現什么情況：
p {border-style: none; border-width: 50px;}注釋：盡管邊框的寬度是 50px，但是邊框樣式設置為 none。此時，邊框的寬度也會變成 0。
提示：如果邊框樣式為 none，即表示邊框根本不存在（無邊框），邊框寬度自動設置為 0。
注意：忘記聲明邊框樣式是一個常犯的錯誤。例如，下面規則中 h2 元素不會有任何邊框：
h2 {border-width: 20px;}由于 border-style 的默認值是 none，如果沒有聲明樣式，就相當于 border-style: none。
因此，如果您希望邊框出現，就必須聲明一個邊框樣式。
邊框的顏色
CSS 使用一個簡單的 border-color 屬性來設置邊框顏色，它一次可以接受最多 4 個顏色值。
可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值：
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}提示：如果顏色值小于 4 個，值復制就會起作用。
例如，下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色：
p {
border-style: solid;
border-color: blue red;
}注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。
定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
例如，要為 h2 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：
h2 {
border-style: solid;
border-color: black;
border-right-color: red;
}
透明邊框
如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。
CSS2 引入了邊框顏色值 transparent。這個值用于創建有寬度的不可見邊框。
<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，使用邊框就像是額外的內邊距一樣，在你需要的時候使其可見。
注釋：這種透明邊框相當于內邊距，因為元素的背景會延伸到邊框區域（有可見背景時）。
提示：在 IE7 之前的版本不支持 transparent，IE 會根據元素的 color 值來設置邊框顏色。
所有邊框屬性在一個聲明之中
<html>
<head>
<style type="text/css">
p {
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>注釋：本例演示用簡寫屬性來將所有四個邊框屬性設置于同一聲明中。
設置邊框
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" 屬性單獨使用無效，請首先使用 "border-style" 屬性來設置邊框。
注釋："border-color" 屬性單獨使用無效，請首先使用 "border-style" 屬性來設置邊框。
CSS 邊框 屬性及描述
border：簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。
border-style：用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
border-width：用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color：設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-top：簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。
border-right：簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。
border-bottom：簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。
border-left：簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。
border-left-color：設置元素的左邊框的顏色。
border-left-style：設置元素的左邊框的樣式。
border-left-width：設置元素的左邊框的寬度。
感謝各位的閱讀！關于“CSS中border屬性怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
