天天看點

純CSS實作不規則的輪廓outline

前言

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

outline

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

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

相容性

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

純CSS實作不規則的輪廓outline

文法

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

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

outline: 1px dashed red;

純CSS實作不規則的輪廓outline

不占空間

首先定義一個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标簽上。

純CSS實作不規則的輪廓outline

不一是矩形

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

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

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

純CSS實作不規則的輪廓outline

換成border我們再試試

border:1px solid #000;
      

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

純CSS實作不規則的輪廓outline

outline-style 輪廓樣式

屬性值

dotted

純CSS實作不規則的輪廓outline

dashed

純CSS實作不規則的輪廓outline

solid

純CSS實作不規則的輪廓outline

double

純CSS實作不規則的輪廓outline

groove

ridge

純CSS實作不規則的輪廓outline

inset

純CSS實作不規則的輪廓outline

outset

純CSS實作不規則的輪廓outline

outline-color 輪廓顔色

顔色值

outline-color: invert;

invert (IE相容)

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

僅在IE中測試使用

對比

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

outline-color: invert;

純CSS實作不規則的輪廓outline

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

純CSS實作不規則的輪廓outline

outline-width 輪廓寬度

thin

1px

純CSS實作不規則的輪廓outline

medium

3px

純CSS實作不規則的輪廓outline

thick

5px

純CSS實作不規則的輪廓outline

<length>

outline-width: 10px;

outline-offset 輪廓偏移

數值

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

outline-offset: 10px;

純CSS實作不規則的輪廓outline

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

outline-offset: -10px;

純CSS實作不規則的輪廓outline