outline
試一試
outline: solid;
outline: dashed red;
outline: 1rem solid;
outline: thick double #32a1ce;
outline: 8px ridge rgb(170 50 220 / 0.6);
border-radius: 2rem;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
padding: 0.75rem;
width: 80%;
height: 100px;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* style */
outline: solid;
/* style | color */
outline: dashed #ff6666;
/* width | style */
outline: thick inset;
/* width | style | color*/
outline: 3px solid green;
/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;
outline 屬性可以使用下面列出的一個、兩個或三個值來指定。值的順序無關緊要。與所有簡寫屬性一樣，任何省略的子值都將設定為其初始值。
注意：如果未定義輪廓的樣式，則許多元素的輪廓將不可見。這是因為樣式預設為 none。一個明顯的例外是 input 元素，它們由瀏覽器賦予預設樣式。
值
<'outline-width'>-
設定輪廓的粗細。如果省略，預設為
medium。請參閱outline-width。 <'outline-style'>-
設定輪廓的樣式。如果省略，預設為
none。請參閱outline-style。 <'outline-color'>-
設定輪廓的顏色。對於支援它的瀏覽器，預設為
invert，對於其他瀏覽器，預設為currentColor。請參閱outline-color。
描述
輪廓是元素邊框外部的一條線。與其他盒子區域不同，輪廓不佔用空間，因此它們不會以任何方式影響文件的佈局。
有一些屬性會影響輪廓的外觀。可以使用 outline 屬性更改樣式、顏色和寬度，使用 outline-offset 屬性更改與邊框的距離，以及使用 border-radius 屬性更改角角度。
輪廓不一定是矩形的：在處理多行文字時，一些瀏覽器會分別為每一行繪製輪廓，而另一些瀏覽器則會用單個輪廓包裹整個文字。
無障礙
將 outline 的值設定為 0 或 none 將刪除瀏覽器的預設焦點樣式。如果元素可以互動，則它必須具有可見的焦點指示器。如果刪除了預設焦點樣式，請提供明顯的焦點樣式。
- 如何設計有用且可用的焦點指示器
- WCAG 2.1: 理解成功準則 2.4.7: 可見的焦點
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
outline =
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>
<outline-width> =
<line-width>
<outline-style> =
auto |
<outline-line-style>
<outline-color> =
auto |
<color> |
<image-1D>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示例
使用 outline 設定焦點樣式
HTML
html
<a href="#">This link has a special focus style.</a>
CSS
css
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #ee7733;
outline-offset: 4px;
background: #ffffaa;
}
結果
規範
| 規範 |
|---|
| CSS Basic User Interface Module Level 4 # outline |
瀏覽器相容性
載入中…