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

内圆角

方法一：

用2个div嵌套实现。

注意：

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

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

缺点：

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

方法二：

利用 和

详解

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

在里面讲到，如果元素设置了圆角边框，再设置 是会. 现四角漏空的现象的。

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

所以要用 和 配合使用。

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

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

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

空隙的长度为 (r√2)-r，即 r（√2 - 1）。而 √2 - 1 < 0.5 ，所以设置 的大小可以为圆角半斤（）的一半。

这里的 “ r ” 指的是 的大小。

总结：

在用这个方法制作内圆角的时候，

的值是 的一半，即

同时， 要 大于等于 。 

缺点：

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

限制：

小于等于 ，同时 又要比 r（√2 - 1）大。

这里的 “ r ” 指的是 的大小。