免費AI編程助手
CSS Outline輪廓
2023-01-06 11:36 更新
CSS Outline輪廓
輪廓是邊界的替代。
輪廓線是圍繞邊框外的元素繪制的線。
+-------------------------------------+ | Outline | | +-----------------------------+ | | |Border | | | | +--------------------+ | | | | |Padding | | | | | | +--------------+ | | | | | | |Content | | | | | | | | | | | | | | | +--------------+ | | | | | | | | | | | +--------------------+ | | | | | | | +-----------------------------+ | | | +-------------------------------------+
我們可以用樣式，顏色和寬度來設(shè)計輪廓。
outline 屬性與 border 屬性不同：outline不是元素尺寸的一部分，元素的總寬度和高度不受輪廓寬度的影響。
輪廓不被視為頁面的一部分，因此在應(yīng)用它們時不會導(dǎo)致頁面布局被調(diào)整。
以下列表描述了與輪廓相關(guān)的元素。
- outline-color
設(shè)置輪廓的顏色
Value: color - outline-offset
設(shè)置輪廓的偏移量。
Value:length - outline-style
設(shè)置輪廓的樣式。
此值與border-style屬性的值相同。 - outline-width
設(shè)置輪廓的寬度。
Value:thin or medium or thick or length - outline
簡寫屬性在單個聲明中設(shè)置輪廓。
Value: color style width
輪廓樣式
outline-style 屬性指定輪廓的樣式。
下表列出了outline-style的可能值。
| 值 | 描述 |
|---|---|
| none | 沒有輪廓。 這是默認值 |
| hidden | 隱藏輪廓 |
| dotted | 點狀輪廓 |
| dashed | 虛線輪廓 |
| solid | 實線輪廓 |
| double | 雙輪廓 |
| groove | 一個3D槽輪廓。 效果取決于輪廓顏色值 |
| ridge | 3D壟狀輪廓。 效果取決于輪廓顏色值 |
| inset | 3D inset 輪廓。 效果取決于輪廓顏色值 |
| outset | 3D outset 輪廓。 效果取決于輪廓顏色值 |
| initial | 將此屬性設(shè)置為其默認值。 |
| inherit | 從其父元素繼承此屬性。 |
僅當(dāng)指定了!DOCTYPE時，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 | 中等輪廓。這是默認值 |
| thin | 細輪廓 |
| thick | 粗輪廓 |
| length | 允許您定義輪廓的粗細 |
| initial | 將此屬性設(shè)置為其默認值。 |
| inherit | 從其父元素繼承此屬性。 |
以下代碼設(shè)置輪廓寬度。
p {
outline-style: dotted;
outline-width: 5px;
}
輪廓快捷方式
outline 簡寫屬性在一個聲明中設(shè)置所有輪廓屬性。
簡寫屬性具有以下語法：
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>相關(guān)屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| outline-color | 設(shè)置輪廓顏色 | 3 |
| outline-offset | 設(shè)置輪廓偏移 | 3 |
| outline-style | 設(shè)置輪廓樣式 | 3 |
| outline-width | 設(shè)置輪廓寬度 | 3 |
| outline | 輪廓的簡寫屬性 | 3 |
以上內(nèi)容是否對您有幫助：
← CSS 邊框
更多建議：