SS3 outline-offset 屬性語法
outline-offset: 距離與單位;
CSS3 outline-offset 屬性只需要設定一個長度距離即可，這個長度距離所代表的就是元素邊框（border）與輪廓（outline）之間的距離，經常使用的單位是 px，另外 outline-offset 屬性還可以使用 inherit 屬性值，繼承自父層的 outlet-offset 屬性值，若要使用 inherit，請多找幾個瀏覽器做測試，特別是 IE 瀏覽器。CSS3 outline-offset 屬性範例
<style>
#DIV_1{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:-5px;
padding:10px;
}
#DIV_2{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:0px;
margin-top:20px;
padding:10px;
}
#DIV_3{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:10px;
margin-top:30px;
padding:10px;
}
</style>
<div id="DIV_1">這個 DIV 區塊的 outline-offset 設定為 -5px</div>
<div id="DIV_2">這個 DIV 區塊的 outline-offset 設定為 0px</div>
<div id="DIV_3">這個 DIV 區塊的 outline-offset 設定為 10px</div>
範例的實際效果#DIV_1{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:-5px;
padding:10px;
}
#DIV_2{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:0px;
margin-top:20px;
padding:10px;
}
#DIV_3{
width:300px;
border:2px black solid;
outline:2px red solid;
outline-offset:10px;
margin-top:30px;
padding:10px;
}
</style>
<div id="DIV_1">這個 DIV 區塊的 outline-offset 設定為 -5px</div>
<div id="DIV_2">這個 DIV 區塊的 outline-offset 設定為 0px</div>
<div id="DIV_3">這個 DIV 區塊的 outline-offset 設定為 10px</div>
這個 DIV 區塊的 outline-offset 設定為 -5px
這個 DIV 區塊的 outline-offset 設定為 0px
這個 DIV 區塊的 outline-offset 設定為 10px
我們在範例中準備了三個 DIV 區塊，分別設定了不同的 CSS3 outline-offset 屬性效果，第一個 DIV 區塊將 outline-offset 設為 -5px，所以輪廓 outline 跑到 DIV 區塊的邊框內，不過這應該不會輪廓的正常用法，只是呈現給各位看而已，第二個 DIV 區塊將 outline-offset 設為 0px，這樣的效果跟沒有寫是一樣的，所以也只是給各位參考，第三個 DIV 區塊把 outline-offset 設為 10px，很明顯得可以看到輪廓距離 DIV 區塊本身的黑色邊框有 10px 的距離，這就是 CSS3 outline-offset 屬性的真正用途。
備註、CSS3 outline-offset 屬性通常會與 outline 屬性共同搭配使用。
延伸閱讀