CSS3 outline-offset 屬性

CSS3 outline-offset 屬性是 CSS 中 outline 屬性的進化版,網頁設計師可以使用 outline 屬性替網頁元素增加輪廓的視覺效果,不過預設的輪廓視覺效果會與元素邊框黏在一起,有辦法把輪廓與邊框分開來嗎?傳統的 CSS 還做不到,但是在 CSS3 推出的 outline-offset 屬性就可以做到,而且網頁設計師還可以自己決定輪廓與元素邊框的距離,創造出以往所無法呈現的視覺效果,實際的表現會在範例中秀出來,除了 IE 瀏覽器之外,其他大部分的主流瀏覽器都支援 CSS3 outline-offset 屬性的效果。

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 區塊的 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 屬性共同搭配使用。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012