CSS輪廓outline用法詳解

前面的話

　　輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現或消失時不會影響文檔流，即不會導致文檔的重新顯示。利用輪廓，瀏覽器可以合併部分輪廓，創建一個連續但非矩形的形狀。預設地，輪廓是一個動態樣式，只有元素取得到焦點或被啟動時呈現

　　[注意]IE7-瀏覽器不支援

 

輪廓樣式

　　與邊框類似，輪廓最基本的方面是樣式，如果一個輪廓沒有樣式，輪廓將根本不會存在。與邊框不同的是，值少了一個hidden

outline-style

　　值: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

　　初始值: none

　　應用於: 所有元素

　　繼承性: 無

 

#輪廓寬度

　　與邊框類似，輪廓寬度不能為負數，也不能指定為百分比值

outline-width

　　值: thin | medium | thick | | inherit

　　初始值: medium

　　應用於: 所有元素

　　繼承性: 無

　　[

　　繼承性: 無

　　[注意]如果輪廓的樣式是none，則輪廓寬度計算值為0

 

輪廓顏色

　　與邊框不同，輪廓顏色有關鍵字invert反色輪廓，代表將輪廓所在的像素完全反色轉換，使輪廓在不同的背景顏色中都可見。但實際上invert關鍵字只有IE瀏覽器支持，其他瀏覽器的輪廓顏色是元素本身的前景色

#outline-color

　　值: | invert | inherit

　　初始值: invert(IE)、前景(其他瀏覽器)

　　應用於: 所有元素

　　繼承性: 無傳承應用於: 所有元素

　　繼承性: 無傳性：

 

輪廓偏移

　　輪廓偏移用來定義輪廓的偏移位置的數值​​。當參數值為正數時，表示輪廓向外偏移；當參數值為負值時，表示輪廓向內偏移

　　[注意]IE瀏覽器不支援

。

 

輪廓

　　輪廓outline類似於邊框樣式的border屬性，允許一次完成輪廓樣式、寬度和顏色的設定。由於給定輪廓必須採用某種統一的樣式、寬度和顏色，所以outline是關於輪廓的唯一簡寫屬性。對於輪廓沒有諸如outline-top或outline-right之類的屬性

　　[注意]outline中並沒有包括outline-offset，需要對outline-offset進行單獨設定

#outline

　　值: [ || || ] | inherit

　　初始值: 無

#　　　　: 所有元素

　　繼承性: 無

 

應用

　　由於輪廓outline不影響元素的盒模型大小，不影響

頁面佈局

，所以可以用outline模仿border邊框效果。但如果是

圓角邊框就不是那麼好辦了。 　　firefox瀏覽器支援私有屬性-moz-outline-radius來設定輪廓圓角。此屬性對應的js寫法是MozOutlineRadius

　　對於其他瀏覽器，我們可以使用其他屬性來實現類似效果。 box-shadow與border-radius屬性一脈相承，也就是說如果border-radius是圓角，則box-shadow的投影也是圓角

<p class="show">测试内容</p>

.show{
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius : 1px;
    box-shadow: 0 0 0 30px lightblue;
}

以上是CSS輪廓outline用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！