W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
輪廓是邊界的替代。
輪廓線是圍繞邊框外的元素繪制的線。
+-------------------------------------+ | Outline | | +-----------------------------+ | | |Border | | | | +--------------------+ | | | | |Padding | | | | | | +--------------+ | | | | | | |Content | | | | | | | | | | | | | | | +--------------+ | | | | | | | | | | | +--------------------+ | | | | | | | +-----------------------------+ | | | +-------------------------------------+
我們可以用樣式,顏色和寬度來(lái)設(shè)計(jì)輪廓。
outline
屬性與 border
屬性不同:outline不是元素尺寸的一部分,元素的總寬度和高度不受輪廓寬度的影響。
輪廓不被視為頁(yè)面的一部分,因此在應(yīng)用它們時(shí)不會(huì)導(dǎo)致頁(yè)面布局被調(diào)整。
以下列表描述了與輪廓相關(guān)的元素。
outline-style
屬性指定輪廓的樣式。
下表列出了outline-style的可能值。
值 | 描述 |
---|---|
none | 沒有輪廓。 這是默認(rèn)值 |
hidden | 隱藏輪廓 |
dotted | 點(diǎn)狀輪廓 |
dashed | 虛線輪廓 |
solid | 實(shí)線輪廓 |
double | 雙輪廓 |
groove | 一個(gè)3D槽輪廓。 效果取決于輪廓顏色值 |
ridge | 3D壟狀輪廓。 效果取決于輪廓顏色值 |
inset | 3D inset 輪廓。 效果取決于輪廓顏色值 |
outset | 3D outset 輪廓。 效果取決于輪廓顏色值 |
initial | 將此屬性設(shè)置為其默認(rèn)值。 |
inherit | 從其父元素繼承此屬性。 |
僅當(dāng)指定了!DOCTYPE時(shí),IE8才支持輪廓屬性。
以下代碼顯示如何使用輪廓樣式。
p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;}
outline-color
屬性設(shè)置輪廓的顏色。
p { outline-style: dotted; outline-color: #00ff00; }
outline-width
設(shè)置輪廓的寬度。
值 | 描述 |
---|---|
medium | 中等輪廓。這是默認(rèn)值 |
thin | 細(xì)輪廓 |
thick | 粗輪廓 |
length | 允許您定義輪廓的粗細(xì) |
initial | 將此屬性設(shè)置為其默認(rèn)值。 |
inherit | 從其父元素繼承此屬性。 |
以下代碼設(shè)置輪廓寬度。
p { outline-style: dotted; outline-width: 5px; }
outline
簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有輪廓屬性。
簡(jiǎn)寫屬性具有以下語(yǔ)法:
outline: outline-color, outline-style, outline-width
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>This is a test</p>
</body>
</html>
屬性 | 描述 | CSS |
---|---|---|
outline-color | 設(shè)置輪廓顏色 | 3 |
outline-offset | 設(shè)置輪廓偏移 | 3 |
outline-style | 設(shè)置輪廓樣式 | 3 |
outline-width | 設(shè)置輪廓寬度 | 3 |
outline | 輪廓的簡(jiǎn)寫屬性 | 3 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: