建站
咨詢
售后
建站咨詢
新聞中心
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、網絡空間、營銷軟件、網站建設、江油網站維護、網站推廣。
圖：輪廓（outline）
輪廓和邊框看起來非常相似，但它們之間也并非沒有區(qū)別，例如：
- 元素上下左右四個方向上邊框的樣式、寬度、顏色可以單獨設置，而輪廓在元素四個方向的寬度、樣式、顏色都是相同的，不能單獨設置；
- 邊框的寬度會直接影響元素的尺寸，而輪廓不會占用頁面空間，不會影響頁面的布局，但是輪廓會與頁面上的其它元素發(fā)聲重疊；
- 除了會與周圍的元素發(fā)聲重疊外，輪廓對周圍的元素沒有任何影響；
- 邊框是元素尺寸的一部分，而輪廓不是，也就是說無論輪廓的寬度是多少，元素的尺寸都不會改變；
- 輪廓可以不是矩形的，但您不能直接創(chuàng)建圓形輪廓。
您可以使用下面幾個屬性來為元素設置輪廓：
- outline-color：設置輪廓的顏色；
- outline-style：設置輪廓的樣式；
- outline-width：設置輪廓的寬度；
- outline：輪廓的簡寫屬性，可以使用 outline 屬性中同時設置上面的三個輪廓屬性；
- outline-offset：設置輪廓與邊框之間的距離。
1. outline-style
outline-style 屬性可以設置輪廓得樣式，屬性得可選值如下所示：
| 值 | 描述 |
|---|---|
| none | 默認值，沒有輪廓 |
| dotted | 定義點狀的輪廓 |
| dashed | 定義虛線輪廓 |
| solid | 定義實線輪廓 |
| double | 定義雙實線輪廓，兩條實線之間的寬度等同于 outline-width 的值 |
| groove | 定義 3D 凹槽輪廓，具體效果取決于 outline-color 的值 |
| ridge | 定義 3D 凸槽輪廓，具體效果取決于 outline-color 的值 |
| inset | 定義 3D 凹邊輪廓，具體效果取決于 outline-color 的值 |
| outset | 定義 3D 凸邊輪廓，具體效果取決于 outline-color 的值 |
| inherit | 從父元素繼承輪廓樣式的設置 |
【示例】使用 outline-style 屬性設置輪廓的樣式：
dotted
dashed
solid
double
groove
ridge
inset
outset
運行結果如下圖所示：
圖：outline-style 屬性演示
注意：因為輪廓的默認樣式為 none，所以您必須指定輪廓的樣式才可以使輪廓顯示在元素周圍。
2. outline-width
outline-width 屬性用來設置輪廓的寬度，只有當 outline-style 屬性的值不為 none 時，outline-width 屬性才會生效。outline-width 屬性的可選值如下：
| 值 | 描述 |
|---|---|
| thin | 設置較細的輪廓 |
| medium | 默認值，設置中等寬度的輪廓 |
| thick | 設置較粗的輪廓 |
| length | 使用具體數(shù)值加單位（px、em、cm 等）的形式設置輪廓的寬度 |
| inherit | 從父元素繼承輪廓的寬度 |
【示例】使用 outline-width 屬性設置輪廓的寬度：
運行結果如下圖所示：
圖：outline-width 屬性演示
3. outline-color
outline-color 屬性用來設置輪廓的顏色，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| color | 指定輪廓顏色，與使用 color、border-color 等屬性設置顏色相同，您可以使用顏色名稱、十六進制碼和 RGB 值等形式定義具體顏色 |
| invert | 使用背景色的反色來設置輪廓的顏色，僅在 IE 和 Opera 瀏覽器下有效 |
| inherit | 從父元素繼承輪廓顏色的設置 |
注意：如果只設置 outline-width 或 outline-color 屬性的話，輪廓的設置并不會生效。您必須使用 outline-style 屬性設置了輪廓的樣式之后，才可以使用 outline-width 和 outline-color 屬性來設置輪廓的寬度和顏色。
【示例】使用 outline-color 屬性設置輪廓的顏色：
red
#AAA
rgb(217, 0, 217)
運行結果如下圖所示：
圖：outline-color 屬性演示
4. outline
outline 屬性是上述 outline-width、outline-style、outline-color 三個屬性的簡寫形式，使用 outline 屬性可以同時設置這三個屬性中的一個或多個，語法格式如下：
outline: outline-width outline-style outline-color;
在使用 outline 屬性時，outline-width、outline-style、outline-color 這幾個參數(shù)的順序并不是固定的，您可以按照上面語法中介紹的順序，也可以根據(jù)自己的喜好改變它們的順序。
【示例】使用 outline 屬性設置元素的輪廓：
red
#AAA
rgb(217, 0, 217)
運行結果如下圖所示：
圖：outline 屬性演示
5. outline-offset
默認情況下輪廓是緊貼著邊框的，通過 outline-offset 屬性可以設置輪廓與邊框之間的距離，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| length | 使用具體數(shù)值加單位的形式設置輪廓與邊框之間的距離，可以為負值 |
| inherit | 從父元素繼承 outline-offset 屬性的值 |
【示例】使用 outline-offset 設置輪廓與邊框之間的距離：
運行結果如下圖所示：
圖：outline-offset 屬性演示
網站欄目：CSSoutline（輪廓）
當前路徑：http://www.dlmjj.cn/article/dhggpei.html
