當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

024_CSS轮廓

發布時間：2025/4/17 CSS 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>A dotted outlineA dashed outlineA solid outlineA double outlineA groove outlineA ridge outlineAn inset outlineAn outset outline注釋: 只有在規定了!DOCTYPE時, Internet Explorer 8(以及更高版本)才支持outline-style屬性。</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>注釋: 只有在規定了!DOCTYPE時, Internet Explorer 8(以及更高版本)才支持outline-style屬性。</body> </html>

6.7.2. 效果圖

總結

以上是生活随笔為你收集整理的024_CSS轮廓的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

轮廓
_CSS