【CSS】内圆角

184250-106.jpg

先上个图看看效果

image.png

紫色边框外面是直角，内部是圆角。要做出这个效果，首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的简书《CSS多重边框》里面有记录。http://www.jianshu.com/p/a6333147dff5

我做出这种效果有2个方法。

方法一：
用2个div嵌套实现。

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

注意：
要实现内层div的居中效果。
这里用了弹性盒子(class="parent"的div中css加粗部分)的方法来实现。

缺点：
要用2个元素来实现。嵌套层次加多。

---

方法二：
利用 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

详解

首先要设置div的边框为圆角边框，用border-radius设置。

在【CSS】多重边框(box-shadow、outline)里面讲到，如果元素设置了圆角边框，再设置outline是会出现四角漏空的现象的。

image.png

而设置了圆角，然后再用 box-shadow 设置外边框，则最外层的四角就不是90°了。

image.png

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

但在这个方法中，如果 outline 的值不够大，box-shadow 在填充空隙的时候就会超出 outline 设定的界限。如下图所示

image.png

所以 outline 的值不能太小，同时要计算缝隙的值

image.png

利用勾股定理计算出空隙的长度

image.png

image.png

空隙的长度为 (r√2)-r，即 r(√2 - 1)。而 √2 - 1 < 0.5 ，所以设置 box-shadow 的大小可以为圆角半斤(border-radius)的一半。这里的 “ r ” 指的是border-radius的大小。

总结：
在用这个方法制作内圆角的时候，
box-shadow 的值是 border-radius 的一半，即 box-shadow = border-radius / 2

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

缺点：
此方法在使用过程中要进行各种计算。

限制：
box-shadow 小于等于 outline ，同时 box-shadow 又要比 r(√2 - 1)大。
这里的 “ r ” 指的是border-radius的大小。