大家好，我是半夏????，一個剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關(guān)注? 點贊 ???? 加我微信：frontendpicker，一起學(xué)習(xí)交流前端，成為更優(yōu)秀的工程師～關(guān)注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！

為撫順縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及撫順縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、撫順縣網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

原文鏈接 ==>http://sylblog.xin/archives/39

前言

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

outline

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

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

兼容性

除了IE瀏覽器，其他瀏覽器兼容性還是不錯的。

語法

outline: [ || || ] | inherit

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

outline: 1px dashed red;

不占空間

首先定義一個p標(biāo)簽和一個div標(biāo)簽，然后div標(biāo)簽定義一個5px的border和一個20px的outline

p {
      outline: 1px dashed red;
  }
div {
    border:5px solid #000;
  outline: 20px dashed red;
}

outline: 1px dashed red;

outline: 20px dashed red;

最終的效果，可以清楚的看到div上定義的outlin已經(jīng)跑到了p標(biāo)簽上。

不一是矩形

使用span進行測試，使用br進行換行，使得每一行的字?jǐn)?shù)都不一樣。

  我是outline

        我可以創(chuàng)建非矩形

        的邊框
        
span {
  outline: 1px dashed red;
}

最終效果，可以看見outline只在字上面有。

換成border我們再試試

border:1px solid #000;

乍一看，好像border創(chuàng)建的也是不規(guī)則的呀，但是再仔細(xì)看，邊框其實并不是不規(guī)則的，只是換行了而已。

outline-style 輪廓樣式

屬性值

dotted

dashed

solid

double

groove

ridge

inset

outset

outline-color 輪廓顏色

顏色值

outline-color: invert;

invert (IE兼容）

經(jīng)測試：最新版的chrome和火狐瀏覽器不支持此值
僅在IE中測試使用

對比

頁面的背景顏色是白色，outline就是黑色。
outline-color: invert;

頁面的背景顏色是黑色，outline就是白色。

outline-width 輪廓寬度

屬性值

thin

1px

medium

3px

thick

5px

outline-width: 10px;

outline-offset 輪廓偏移

數(shù)值

當(dāng)參數(shù)值為正數(shù)時，表示輪廓向外偏移
outline-offset: 10px;

當(dāng)參數(shù)值為負(fù)值時，表示輪廓向內(nèi)偏移

outline-offset: -10px;

分享標(biāo)題：CSS 不規(guī)則的輪廓-outline
轉(zhuǎn)載注明：http://weahome.cn/article/dsojeds.html