CSS 不規則的輪廓-outline

大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注➕ 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公衆号：搞前端的半夏,了解更多前端知識! 點我探索新世界！

原文連結 ==>http://sylblog.xin/archives/39

前言

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

outline

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

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

相容性

除了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;