試一試
outline-color: red;
outline-color: #32a1ce;
outline-color: rgb(170 50 220 / 0.6);
outline-color: hsl(60 90% 50% / 0.8);
outline-color: currentColor;
<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 {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
語法
css
/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
outline-color 屬性指定為以下值中的任意一個。
值
<color>-
輪廓的顏色，指定為
<color>。
規範還列出了一個附加值 auto，但目前沒有任何瀏覽器支援。當實現時，除非 outline-style 設定為 auto，否則 auto 將計算為 currentColor，在這種情況下，它將計算為 強調色。
描述
輪廓是圍繞元素繪製的一條線，位於 border 之外。與元素的邊框不同，輪廓繪製在元素的框架之外，並且可能與其他內容重疊。另一方面，邊框實際上會改變頁面的佈局，以確保它適合而不會與任何其他內容重疊（除非你明確將其設定為重疊）。
在定義輪廓外觀時，通常使用簡寫屬性 outline 更方便。
無障礙
自定義 焦點樣式 通常涉及調整 outline 屬性。如果輪廓的顏色被調整，重要的是確保它與輪廓所放置的背景之間的對比度足夠高，以便有低視力障礙的人能夠感知它。
顏色對比度是透過比較文字和背景顏色值的亮度來確定的。為了滿足當前的 Web 內容可訪問性指南 (WCAG)，文字內容需要 4.5:1 的比率，而大文字（如標題）需要 3:1 的比率。大文字定義為 18.66 畫素及粗體或更大，或 24 畫素或更大。
正式定義
正式語法
outline-color =
auto |
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示例
設定實心藍色輪廓
HTML
html
<p>My outline is blue, as you can see.</p>
CSS
css
p {
outline: 2px solid; /* Set the outline width and style */
outline-color: blue; /* Set the outline color */
margin: 5px;
}
結果
規範
| 規範 |
|---|
| CSS Basic User Interface Module Level 4 # outline-color |
瀏覽器相容性
載入中…