CSS 不規則的輪廓-outline

搞前端的半夏 發表於 2022-05-13
CSS

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

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

前言

日常開發中,我們經常使用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

CSS  不規則的輪廓-outline

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;
CSS  不規則的輪廓-outline

outline-offset 輪廓偏移

數值

當引數值為正數時,表示輪廓向外偏移
outline-offset: 10px;
CSS  不規則的輪廓-outline

當引數值為負值時,表示輪廓向內偏移

outline-offset: -10px;
CSS  不規則的輪廓-outline