前言
日常開發中，我們經常使用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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/356142.html
標籤：其他
上一篇：30天完成資料庫替換 頂住10倍流量壓力，易車是如何做到的？
下一篇：作業流審批業務代碼詳解（二）