CSS outline-style 屬性
更多“自己嘗試”的例子見下文。
定義和用法
輪廓是繪製在元素邊框外部的一條線,用於使元素“脫穎而出”。
outline-style
屬性指定輪廓的樣式。
提示和註釋
注意: 輪廓與 邊框 不同!與邊框不同,輪廓繪製在元素邊框的外部,並且可能會覆蓋其他內容。此外,輪廓不是元素尺寸的一部分;元素的總寬度和高度不受輪廓寬度的影響。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
CSS 語法
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
屬性值
值 | 描述 | 演示 |
---|---|---|
none | 指定無輪廓。這是預設值 | 演示 ❯ |
hidden | 指定隱藏輪廓 | 演示 ❯ |
dotted | 指定點狀輪廓 | 演示 ❯ |
dashed | 指定虛線輪廓 | 演示 ❯ |
solid | 指定實線輪廓 | 演示 ❯ |
double | 指定雙線輪廓 | 演示 ❯ |
groove | 指定 3D 凹槽輪廓。效果取決於 outline-color 的值 | 演示 ❯ |
ridge | 指定 3D 脊線輪廓。效果取決於 outline-color 的值 | 演示 ❯ |
inset | 指定 3D 嵌入式輪廓。效果取決於 outline-color 的值 | 演示 ❯ |
outset | 指定 3D 外凸式輪廓。效果取決於 outline-color 的值 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
使用不同的值設定輪廓樣式
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
自己動手試一試 »
相關頁面
CSS 教程:CSS 輪廓
CSS 參考:outline 屬性
HTML DOM 參考:outlineStyle 屬性