024_CSS轮廓
1. 輪廓(outline)是繪制于元素周圍的一條線, 位于邊框邊緣的外圍, 可起到突出元素的作用。輪廓與邊框不同, 輪廓不占用空間。
2. CSS輪廓屬性
3. 輪廓的樣式
3.1. outline-style 屬性用于設置元素的整個輪廓的樣式。
3.2. 默認值
3.3. 可能的值
4. 輪廓的顏色
4.1. outline-color屬性設置一個元素整個輪廓中可見部分的顏色。
4.2. 請始終在outline-color屬性之前聲明outline-style屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
4.3. 默認值
4.4. 可能的值
5. 輪廓的寬度
5.1. outline-width 屬性設置元素整個輪廓的寬度，只有當輪廓樣式不是 none 時，這個寬度才會起作用。如果樣式為 none，寬度實際上會重置為 0。不允許設置負長度值。
5.2. 請始終在 outline-width 屬性之前聲明 outline-style 屬性。元素只有獲得輪廓以后才能改變其輪廓的寬度。
5.3. 默認值
5.4. 可能的值
5.5. 例子
5.5.1. 代碼
<!DOCTYPE html> <html><head><title>輪廓的樣式</title><meta charset="utf-8" /><style type="text/css">p {margin: 32px;}p.dotted {outline-style: dotted; outline-color: #00ff00; outline-width: thin;}p.dashed {outline-style: dashed; outline-color: #fff000; outline-width: medium;}p.solid {outline-style: solid; outline-color: #ffff00; outline-width: thick;}p.double {outline-style: double; outline-color: #ff0000; outline-width: 1em;}p.groove {outline-style: groove; outline-color: #0000ff; outline-width: 10px;}p.ridge {outline-style: ridge; color: orange;outline-color: invert; outline-width: 1rem;}p.inset {outline-style: inset; outline-color: #00ff0f; outline-width: 3mm;}p.outset {outline-style: outset; color: red;outline-width: 0.1cm;}</style></head><body><p class="dotted">A dotted outline</p><p class="dashed">A dashed outline</p><p class="solid">A solid outline</p><p class="double">A double outline</p><p class="groove">A groove outline</p><p class="ridge">A ridge outline</p><p class="inset">An inset outline</p><p class="outset">An outset outline</p><p><b>注釋: </b>只有在規定了!DOCTYPE時, Internet Explorer 8(以及更高版本)才支持outline-style屬性。</p></body> </html>5.5.2. 效果圖
6. 輪廓
6.1. outline(輪廓)是繪制于元素周圍的一條線, 位于邊框邊緣的外圍, 可起到突出元素的作用。
6.2. 輪廓線不會占據空間, 也不一定是矩形。
6.3. outline簡寫屬性在一個聲明中設置所有的輪廓屬性。
6.4. 可以按順序設置如下屬性:
- outline-color
- outline-style
- outline-width
6.5. 如果不設置其中的某個值, 也不會有問題, 使用默認值。
6.6. 默認值
6.7.?例子
6.7.1. 代碼
<!DOCTYPE html> <html><head><title>輪廓</title><meta charset="utf-8" /><style type="text/css">p {outline: #00ff00 dotted thick;}</style></head><body><p><b>注釋: </b>只有在規定了!DOCTYPE時, Internet Explorer 8(以及更高版本)才支持outline-style屬性。</p></body> </html>6.7.2. 效果圖
總結
- 上一篇： 031_CSS表格
- 下一篇： 025_CSS框模型概述