184250-106.jpg

先上個圖看看效果

image.png

紫色邊框外面是直角，內(nèi)部是圓角。要做出這個效果，首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的簡書《CSS多重邊框》里面有記錄。http://www.lxweimin.com/p/a6333147dff5

我做出這種效果有2個方法。

方法一：
用2個div嵌套實現(xiàn)。

HTML代碼：

<div class="parent">
    <div></div>
</div>

CSS代碼：

.parent {
    width: 300px;
    height: 300px;
    background: #669;
    display: flex;
    justify-content: center;
    align-items: center;
}
.parent > div {
    width: 280px;
    height: 280px;
    border-radius: 20px;
    background: #6cc;
}

image.png

注意：
要實現(xiàn)內(nèi)層div的居中效果。
這里用了彈性盒子（class="parent"的div中css加粗部分）的方法來實現(xiàn)。

缺點：
要用2個元素來實現(xiàn)。嵌套層次加多。

方法二：
利用 box-shadow 和 outline

HTML代碼：
<div></div>

CSS代碼：

div{
    width: 300px;
    height: 300px;
    background: #6cc;
    border-radius: 30px;
    box-shadow: 0 0 0 15px #669;
    outline: 15px solid #669;
}

image.png

詳解

首先要設(shè)置div的邊框為圓角邊框，用border-radius設(shè)置。

在【CSS】多重邊框（box-shadow、outline）里面講到，如果元素設(shè)置了圓角邊框，再設(shè)置outline是會出現(xiàn)四角漏空的現(xiàn)象的。

image.png

而設(shè)置了圓角，然后再用 box-shadow 設(shè)置外邊框，則最外層的四角就不是90°了。

image.png

所以要用 box-shadow 和 outline 配合使用。

但在這個方法中，如果 outline 的值不夠大，box-shadow 在填充空隙的時候就會超出 outline 設(shè)定的界限。如下圖所示

image.png

所以 outline 的值不能太小，同時要計算縫隙的值

image.png

利用勾股定理計算出空隙的長度

image.png

image.png

空隙的長度為 (r√2)-r，即 r（√2 - 1）。而 √2 - 1 < 0.5 ，所以設(shè)置 box-shadow 的大小可以為圓角半斤（border-radius）的一半。
這里的 “ r ” 指的是border-radius的大小。

總結(jié)：
在用這個方法制作內(nèi)圓角的時候，
box-shadow 的值是 border-radius 的一半，即 box-shadow = border-radius / 2

同時，outline 要 大于等于 box-shadow 。

缺點：
此方法在使用過程中要進(jìn)行各種計算。

限制：
box-shadow 小于等于 outline ，同時 box-shadow 又要比 r（√2 - 1）大。
這里的 “ r ” 指的是border-radius的大小。