CSS 不規則的輪廓-outline

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

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

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

前言

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

相關文章