建站
咨詢
售后
建站咨詢
新聞中心
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、江油網(wǎng)站維護(hù)、網(wǎng)站推廣。
圖：輪廓（outline）
輪廓和邊框看起來非常相似，但它們之間也并非沒有區(qū)別，例如：
- 元素上下左右四個(gè)方向上邊框的樣式、寬度、顏色可以單獨(dú)設(shè)置，而輪廓在元素四個(gè)方向的寬度、樣式、顏色都是相同的，不能單獨(dú)設(shè)置；
- 邊框的寬度會直接影響元素的尺寸，而輪廓不會占用頁面空間，不會影響頁面的布局，但是輪廓會與頁面上的其它元素發(fā)聲重疊；
- 除了會與周圍的元素發(fā)聲重疊外，輪廓對周圍的元素沒有任何影響；
- 邊框是元素尺寸的一部分，而輪廓不是，也就是說無論輪廓的寬度是多少，元素的尺寸都不會改變；
- 輪廓可以不是矩形的，但您不能直接創(chuàng)建圓形輪廓。
您可以使用下面幾個(gè)屬性來為元素設(shè)置輪廓：
- outline-color：設(shè)置輪廓的顏色；
- outline-style：設(shè)置輪廓的樣式；
- outline-width：設(shè)置輪廓的寬度；
- outline：輪廓的簡寫屬性，可以使用 outline 屬性中同時(shí)設(shè)置上面的三個(gè)輪廓屬性；
- outline-offset：設(shè)置輪廓與邊框之間的距離。
1. outline-style
outline-style 屬性可以設(shè)置輪廓得樣式，屬性得可選值如下所示：
| 值 | 描述 |
|---|---|
| none | 默認(rèn)值，沒有輪廓 |
| dotted | 定義點(diǎn)狀的輪廓 |
| dashed | 定義虛線輪廓 |
| solid | 定義實(shí)線輪廓 |
| double | 定義雙實(shí)線輪廓，兩條實(shí)線之間的寬度等同于 outline-width 的值 |
| groove | 定義 3D 凹槽輪廓，具體效果取決于 outline-color 的值 |
| ridge | 定義 3D 凸槽輪廓，具體效果取決于 outline-color 的值 |
| inset | 定義 3D 凹邊輪廓，具體效果取決于 outline-color 的值 |
| outset | 定義 3D 凸邊輪廓，具體效果取決于 outline-color 的值 |
| inherit | 從父元素繼承輪廓樣式的設(shè)置 |
【示例】使用 outline-style 屬性設(shè)置輪廓的樣式：
dotted
dashed
solid
double
groove
ridge
inset
outset
運(yùn)行結(jié)果如下圖所示：
圖：outline-style 屬性演示
注意：因?yàn)檩喞哪J(rèn)樣式為 none，所以您必須指定輪廓的樣式才可以使輪廓顯示在元素周圍。
2. outline-width
outline-width 屬性用來設(shè)置輪廓的寬度，只有當(dāng) outline-style 屬性的值不為 none 時(shí)，outline-width 屬性才會生效。outline-width 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| thin | 設(shè)置較細(xì)的輪廓 |
| medium | 默認(rèn)值，設(shè)置中等寬度的輪廓 |
| thick | 設(shè)置較粗的輪廓 |
| length | 使用具體數(shù)值加單位（px、em、cm 等）的形式設(shè)置輪廓的寬度 |
| inherit | 從父元素繼承輪廓的寬度 |
【示例】使用 outline-width 屬性設(shè)置輪廓的寬度：
運(yùn)行結(jié)果如下圖所示：
圖：outline-width 屬性演示
3. outline-color
outline-color 屬性用來設(shè)置輪廓的顏色，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| color | 指定輪廓顏色，與使用 color、border-color 等屬性設(shè)置顏色相同，您可以使用顏色名稱、十六進(jìn)制碼和 RGB 值等形式定義具體顏色 |
| invert | 使用背景色的反色來設(shè)置輪廓的顏色，僅在 IE 和 Opera 瀏覽器下有效 |
| inherit | 從父元素繼承輪廓顏色的設(shè)置 |
注意：如果只設(shè)置 outline-width 或 outline-color 屬性的話，輪廓的設(shè)置并不會生效。您必須使用 outline-style 屬性設(shè)置了輪廓的樣式之后，才可以使用 outline-width 和 outline-color 屬性來設(shè)置輪廓的寬度和顏色。
【示例】使用 outline-color 屬性設(shè)置輪廓的顏色：
red
#AAA
rgb(217, 0, 217)
運(yùn)行結(jié)果如下圖所示：
圖：outline-color 屬性演示
4. outline
outline 屬性是上述 outline-width、outline-style、outline-color 三個(gè)屬性的簡寫形式，使用 outline 屬性可以同時(shí)設(shè)置這三個(gè)屬性中的一個(gè)或多個(gè)，語法格式如下：
outline: outline-width outline-style outline-color;
在使用 outline 屬性時(shí)，outline-width、outline-style、outline-color 這幾個(gè)參數(shù)的順序并不是固定的，您可以按照上面語法中介紹的順序，也可以根據(jù)自己的喜好改變它們的順序。
【示例】使用 outline 屬性設(shè)置元素的輪廓：
red
#AAA
rgb(217, 0, 217)
運(yùn)行結(jié)果如下圖所示：
圖：outline 屬性演示
5. outline-offset
默認(rèn)情況下輪廓是緊貼著邊框的，通過 outline-offset 屬性可以設(shè)置輪廓與邊框之間的距離，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| length | 使用具體數(shù)值加單位的形式設(shè)置輪廓與邊框之間的距離，可以為負(fù)值 |
| inherit | 從父元素繼承 outline-offset 屬性的值 |
【示例】使用 outline-offset 設(shè)置輪廓與邊框之間的距離：
運(yùn)行結(jié)果如下圖所示：
圖：outline-offset 屬性演示
網(wǎng)站題目：CSSoutline（輪廓）
轉(zhuǎn)載來于：http://www.5511xx.com/article/dhggpei.html
