首頁 > 文章 > web前端 > css中關於outline與border的區別分析

css中關於outline與border的區別分析

黄舟原創: 2017-07-27 09:21:083654瀏覽

border與outline:

border屬性：

border-width、border-style、border-color 其中border-style可以為none或hidden

outline（輪廓）
在元素邊框邊緣的外圍繪製一條包圍元素的線，包括outline-color、outline-style、outline- width三個子屬性的設置，可缺省，無固定順序。輪廓不佔據頁面空間，也不一定是矩形。
除了IE以外的瀏覽器都直接支援outline。只有規定了!DOCUMENT之後的IE8以上版本的瀏覽器才支援outline。

outline-style可為none（不含hidden屬性）

總結：這兩者的差異有:
1.outline是不佔空間的，既不會增加額外的width或height（這樣不會導致瀏覽器渲染時出現reflow或是repaint）
2.outline有可能是非矩形的（火狐瀏覽器下）

在FireFox瀏覽器中，就有和outline匹對的圓角夫妻outline-radius

範例：

使用outline實作下圖效果

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>直角三角形（右下角）</title>
    <style type="text/css">
        .use-outline-offset{
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            height: 200px;
            border:40px solid #000000;
            background-color:#cccccc;
            outline-width:40px;
            outline-style:dotted;
            outline-offset:-80px;
            box-sizing: border-box;
        }
    </style></head><body><p class="use-outline-offset"></p></body></html>

效果圖：

box-shadow模擬outline的圓角效果

outline-radius#雖然沒戲了，但是，我們可以使用其他屬性，可以實現類似的效果，比方說，圖形構建大神之一的box-shadow.

我們平時使用box- shadow最多的是前面3個參數，水平/垂直偏移以及模糊大小，可能有一些小夥伴並不清楚其第4個可選參數值究竟有何用？ box-shadow第4個參數值，名外擴展，可以把投影範圍擴大，當然，擴大的區域是實色區域。我們就可以利用這個特性，模擬實作不影響元素佔據尺寸的outline實色邊框效果啦！

實例先行，程式碼如下：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style type="text/css">
        .outline-radius {
            margin: 200px auto;
            width: 400px;
            height: 300px;
            border-radius: 1px;
            box-shadow: 0 0 0 30px #cd0000;
        }
        .outline-radius>img{
            width: 100%;
            height: 100%;
        }
    </style></head><body><p class="outline-radius">
    <img src="img/mm1.jpg"></p></body></html>

效果圖如下：

##下面簡單解釋下兩行CSS程式碼的意義：

#border-radius: 1px表示圓角大小1像素。有同學可能奇怪了，怎麼是1像素啊，截圖圓角明明好幾十像素，下面正好就解釋了；

######box- shadow: 0 0 0 30px #cd0000###出現了4個數值，分別是水平偏移0, 垂直偏移0，模糊0(純色), 擴展大小30像素。我們可以想像成，光線直接從盒子的正上方照下來，因為沒有偏移沒有模糊，我們看不到任何陰影。實際上，盒子的陰影正好是盒子的大小（外帶1像素圓角），此時，擴展30像素，我們可以腦補一下，1像素圓角的陰影再擴展30像素。喲，不就是我們需要的效果嘛，不就是截圖展示的效果嘛！ ############知道###border-radius### 1像素的左右了吧，擴充30像素後，圓角就是30像素大小了。 ##################然而，雖然肉眼看不出來，上面的方法實際上有瑕疵，因為圖片不是純正的直角，有1像素的圓角。如果你想實現完美的內方外圓的效果，可以套一層標籤，外面的標籤使用###border-radius###和###box-shadow###就可以了。 ######

以上是css中關於outline與border的區別分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3中關於outline如何為div元素新增輪廓線的實例下一篇：css3中關於outline如何為div元素新增輪廓線的實例

看更多