027_CSS边框
1. 元素的邊框(border)是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
2. CSS border屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
3. CSS邊框?qū)傩?/p>
4. 邊框與背景
4.1. CSS規(guī)范指出, 邊框繪制在"元素的背景之上"。這很重要, 因為有些邊框是"間斷的"(例如, 點線邊框或虛線框), 元素的背景應(yīng)當出現(xiàn)在邊框的可見部分之間。
4.2. CSS2.1指出: 元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。
5. 邊框的樣式
5.1. border-style屬性用于設(shè)置元素所有邊框的樣式, 或者單獨地為各邊設(shè)置邊框樣式。
5.2. 只有當這個值不是none時邊框才可能出現(xiàn)。
5.3. border-style屬性是按照上、右、下、左的順序來進行邊框樣式設(shè)置的, 遵從和內(nèi)邊距一樣的值復制規(guī)則。
5.4. 默認值
5.5. 可能的值
5.6. 單邊框樣式
- border-top-style: 設(shè)置上邊框的樣式。
- border-right-style: 設(shè)置右邊框的樣式。
- border-bottom-style: 設(shè)置下邊框的樣式。
- border-left-style: 設(shè)置左邊框的樣式。
5.7. 例子
5.7.1. 代碼
<!DOCTYPE html> <html><head><title>邊框的樣式</title><meta charset="utf-8" /><style type="text/css">p {width: 650px; background-color: orange;}#p1 {border-style: dotted;}#p2 {border-style: dashed;}#p3 {border-style: solid;}#p4 {border-style: double;}#p5 {border-style: groove;}#p6 {border-style: ridge;}#p7 {border-style: inset;}#p8 {border-style: outset;}#p9 {border-style: dotted none dashed hidden;}#p10 {border-top-style: solid;border-right-style: none;border-bottom-style: double;border-left-style: groove;}img {border-style: outset;}</style></head><body><p id="p1">border-style 屬性, dotted值: 定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。</p><p id="p2">border-style 屬性, dashed值: 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。</p><p id="p3">border-style 屬性, solid值: 定義實線。</p><p id="p4">border-style 屬性, double值: 定義雙線。雙線的寬度等于 border-width 的值。</p><p id="p5">border-style 屬性, groove值: 定義3D凹槽邊框。其效果取決于border-color的值。</p><p id="p6">border-style 屬性, ridge值: 定義3D壟狀邊框。其效果取決于border-color的值。</p><p id="p7">border-style 屬性, inset值: 定義3D inset邊框。其效果取決于border-color的值。</p><p id="p8">border-style 屬性, outset值: 定義3D outset邊框。其效果取決于border-color的值。</p><p id="p9">border-style屬性,hidden值:與"none"相同。不過應(yīng)用于表時除外,對于表hidden用于解決邊框沖突。</p><p id="p10">border-style 屬性, none值: 定義無邊框。</p><img src="btn.png" /></body> </html>5.7.2.?效果圖
6. 邊框的寬度
6.1. border-width 簡寫屬性為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。
6.2. 只有當邊框樣式不是none時才起作用。如果邊框樣式是none, 邊框?qū)挾葘嶋H上會重置為0。不允許指定負長度值。
6.3. border-width屬性是按照上、右、下、左的順序來設(shè)置邊框?qū)挾鹊? 遵從和內(nèi)邊距一樣的值復制規(guī)則。
6.4. 默認值
6.5. 可能的值
6.6. 單邊框?qū)挾?/strong>
- border-top-width: 設(shè)置上邊框的寬度。
- border-right-width: 設(shè)置右邊框的寬度。
- border-bottom-width: 設(shè)置下邊框的寬度。
- border-left-width: 設(shè)置左邊框的寬度。
6.7. 例子
6.7.1. 代碼
<!DOCTYPE html> <html><head><title>邊框的寬度</title><meta charset="utf-8" /><style type="text/css">p {width: 700px;background-color: orange;border-style: dotted;}#p1 {border-width: thin;}#p2 {border-width: medium;}#p3 {border-width: thick;}#p4 {border-width: 15px 10px 5px 8px;}#p5 {border-top-width: 15px;border-right-width: 10px;border-bottom-width: 5px;border-left-width: 8px;}</style></head><body><p id="p1">border-width 屬性, thin值: 定義細的邊框。</p><p id="p2">border-width 屬性, medium值: 默認。定義中等的邊框。</p><p id="p3">border-width 屬性, thick值: 定義粗的邊框。</p><p id="p4">border-width 屬性, length允許您自定義邊框的寬度。</p><p id="p5">定義單邊寬度:border-top-width border-right-width border-bottom-width border-left-width</p></body> </html>6.7.2.?效果圖
7. 邊框的顏色
7.1. border-color簡寫屬性為元素四條邊框設(shè)置顏色。
7.2. border-color屬性是按照上、右、下、左的順序來設(shè)置邊框顏色的。
7.3. 默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色, 它將與元素的文本顏色相同。另一方面, 如果元素沒有任何文本, 假設(shè)它是一個表格, 其中只包含圖像, 那么該表的邊框顏色就是其父元素的文本顏色(因為color可以繼承)。
7.4. 默認值
7.5. 可能的值
7.6. 定義單邊顏色
- border-top-color: 設(shè)置上邊框的顏色。
- border-right-color: 設(shè)置右邊框的顏色。
- border-bottom-color: 設(shè)置下邊框的顏色。
- border-left-color: 設(shè)置左邊框的顏色。
7.7. 例子
7.7.1. 代碼
<!DOCTYPE html> <html><head><title>邊框的顏色</title><meta charset="utf-8" /><style type="text/css">p {width: 700px;background-color: orange;border-style: dotted;}#p1 {border-color: blue;}#p2 {border-color: blue rgb(25%,35%,45%) #909090 red;}#p3 { border-top-color: blue;border-right-color: rgb(25%,35%,45%);border-bottom-color: #909090;border-left-color: red;}</style></head><body><p id="p1">border-color屬性設(shè)置四條邊框的顏色。此屬性可設(shè)置1到4種顏色。</p><p id="p2">可以使用任何類型的顏色值, 例如可以是命名顏色, 也可以是十六進制和RGB值</p><p id="p3">定義單邊顏色: border-top-color border-right-color border-bottom-color border-left-color</p></body> </html>7.7.2.?效果圖
8.?上邊框
8.1.?border-top簡寫屬性把上邊框的所有屬性設(shè)置到一個聲明中。
8.2.?可以按順序設(shè)置如下屬性:
- border-top-width
- border-top-style
- border-top-color
9.?右邊框
9.1.?border-right簡寫屬性把右邊框的所有屬性設(shè)置到一個聲明中。
9.2.?可以按順序設(shè)置如下屬性:
- border-right-width
- border-right-style
- border-right-color
10.?下邊框
10.1.?border-bottom簡寫屬性把下邊框的所有屬性設(shè)置到一個聲明中。
10.2.?可以按順序設(shè)置如下屬性:
- ?border-bottom-width
- ?border-bottom-style
- ?border-bottom-color
11.?左邊框
11.1.?border-left簡寫屬性把左邊框的所有屬性設(shè)置到一個聲明中。
11.2.?可以按順序設(shè)置如下屬性:
- ?border-left-width
- ?border-left-style
- ?border-left-color
12.?邊框
12.1.?border簡寫屬性在一個聲明設(shè)置所有的邊框?qū)傩浴?/p>
12.2.?可以按順序設(shè)置如下屬性:
- border-width
- border-style
- border-color
12.3. 例子
12.3.1.?代碼
<!DOCTYPE html> <html><head><title>邊框</title><meta charset="utf-8" /><style type="text/css">#p1 {border-top: thin dotted #ff0000;border-right: medium dashed green;border-bottom: thick solid rgb(122, 127, 255);border-left: 10px groove rgb(25%,35%,45%);}#p2 {border: 1em ridge pink;}</style></head><body><p id="p1">border-top簡寫屬性把上邊框的所有屬性設(shè)置到一個聲明中。border-right簡寫屬性把右邊框的所有屬性設(shè)置到一個聲明中。border-bottom簡寫屬性把下邊框的所有屬性設(shè)置到一個聲明中。border-left簡寫屬性把左邊框的所有屬性設(shè)置到一個聲明中。</p><p id="p2">border簡寫屬性在一個聲明設(shè)置所有的邊框?qū)傩浴?lt;/p></body> </html>12.3.2. 效果圖
總結(jié)
- 上一篇： 026_CSS内边距
- 下一篇： 028_CSS外边距