純CSS實作不規則的輪廓outline

​

前言

日常開發中，我們經常使用border來給元素增加一些美感，但是由于盒子模型的存在，border有時候會影響我們的判斷，是以今天我們來介紹另一個屬性來為元素增加一些美感。

outline

outlineCSS 中的屬性在元素的外部繪制一條線。它類似于邊界，除了：

1. 它總是圍繞所有邊，你不能指定特定的邊
2. 它不是盒模型的一部分，是以不會影響元素或相鄰元素的位置，也就是說outline outline不占據空間
3. 它并不總是矩形

相容性

除了IE浏覽器，其他浏覽器相容性還是不錯的。

文法

outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit

由此可見outline也是一個縮寫的屬性。

outline: 1px dashed red;

不占空間

首先定義一個p标簽和一個div标簽，然後div标簽定義一個5px的border和一個20px的outline

p {
      outline: 1px dashed red;
  }
div {
    border:5px solid #000;
  outline: 20px dashed red;
}

<p>outline: 1px dashed red;</p>

<div>outline: 20px dashed red;</div>      

最終的效果，可以清楚的看到div上定義的outlin已經跑到了p标簽上。

不一是矩形

使用span進行測試，使用br進行換行，使得每一行的字數都不一樣。

<span>我是outline<br />
        我可以建立非矩形<br />
        的邊框</span>
        
span {
  outline: 1px dashed red;
}      

最終效果，可以看見outline隻在字上面有。

換成border我們再試試

border:1px solid #000;
      

乍一看，好像border建立的也是不規則的呀，但是再仔細看，邊框其實并不是不規則的，隻是換行了而已。

outline-style 輪廓樣式

屬性值

dotted

dashed

solid

double

groove

ridge

inset

outset

outline-color 輪廓顔色

顔色值

outline-color: invert;

invert (IE相容）

經測試：最新版的chrome和火狐浏覽器不支援此值

僅在IE中測試使用

對比

頁面的背景顔色是白色，outline就是黑色。

outline-color: invert;

頁面的背景顔色是黑色，outline就是白色。

outline-width 輪廓寬度

thin

1px

medium

3px

thick

5px

<length>

outline-width: 10px;

outline-offset 輪廓偏移

數值

當參數值為正數時，表示輪廓向外偏移

outline-offset: 10px;

當參數值為負值時，表示輪廓向内偏移

outline-offset: -10px;