輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現或消失時不會影響文檔流，即不會導致文檔的重新顯示。利用輪廓，瀏覽器可以合併部分輪廓，創建一個連續但非矩形的形狀。預設地，輪廓是一個動態樣式，只有元素取得到焦點或被啟動時呈現
[注意]IE7-瀏覽器不支援
與邊框類似，輪廓最基本的方面是樣式，如果一個輪廓沒有樣式，輪廓將根本不會存在。與邊框不同的是，值少了一個hidden
值: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
初始值: none
應用於: 所有元素
繼承性: 無
與邊框類似，輪廓寬度不能為負數，也不能指定為百分比值
值: thin | medium | thick |
初始值: medium
應用於: 所有元素
繼承性: 無
[
繼承性: 無 [注意]如果輪廓的樣式是none，則輪廓寬度計算值為0輪廓顏色
與邊框不同，輪廓顏色有關鍵字invert反色輪廓，代表將輪廓所在的像素完全反色轉換，使輪廓在不同的背景顏色中都可見。但實際上invert關鍵字只有IE瀏覽器支持，其他瀏覽器的輪廓顏色是元素本身的前景色
#outline-color
值:輪廓偏移
輪廓偏移用來定義輪廓的偏移位置的數值。當參數值為正數時，表示輪廓向外偏移；當參數值為負值時，表示輪廓向內偏移[注意]IE瀏覽器不支援
。 輪廓 輪廓outline類似於邊框樣式的border屬性，允許一次完成輪廓樣式、寬度和顏色的設定。由於給定輪廓必須採用某種統一的樣式、寬度和顏色，所以outline是關於輪廓的唯一簡寫屬性。對於輪廓沒有諸如outline-top或outline-right之類的屬性 [注意]outline中並沒有包括outline-offset，需要對outline-offset進行單獨設定#outline 值: [圓角邊框就不是那麼好辦了。 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中文網其他相關文章！