【CSS】内圆角（box-shadow、outline）

box-shadow 和 outline 的使用方法：【CSS】多重边框（box-shadow、outline）

内圆角

方法一：

用 2 个 div 嵌套实现。

<div class="parent">	<div></div></div>
<style>.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;}</style>

注意：

要实现内层 div 的居中效果。

这里用了弹性盒子（class="parent"的 div 中 css 加粗部分）的方法来实现。

缺点：

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

方法二：

利用 box-shadow 和 outline

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

详解

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

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

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

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

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

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

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

空隙的长度为 (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 的大小。