CSS实现边框内圆角

CSS实现边框内圆角

先上效果图：

要想实现上图所示的效果，我们首先想到的是通过两个元素定义不同的背景色和边框样式来实现，这是十分简单的一种实现方式，但是要求我们使用两个元素，如果只用一个元素能不能实现所要的效果呢？答案是肯定的。
在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现上图的效果 参考：多重边框
css代码：

.div_border{
            background: rgb(216, 188, 151);
            border-radius: 8px;
            box-shadow: 0 0 0 4px #655;
            outline: 6px solid #655;
        }

注意：
box-shadow属性指定的扩张值不一定等于描边的宽度，我们只需要指定一个足够填补“空隙”的扩张值就可以了。扩张半径的大小应为 ${(\sqrt{2} - 1)}r$(r为圆角半径)，为了避免每次都要计算，我们可以直接使用圆角半径的一半

限制情况：

1. 为了达到这个效果，扩张半径要小于描边宽度值，但是他有要比 ${(\sqrt{2} - 1)}r$大，这意味着，如果描边的宽度比 ${(\sqrt{2} - 1)}r$小，是无法达成该效果的。
2. 若果边框不是纯色的，而是加一层纹理或者其他的效果，该方式不再适用，可以使用两种元素的方式很容易做到

补充：使用伪元素实现边框内圆角

.content { 
     position: relative;
     height: 200px;
     widows: 400px;
     text-align: center;
     line-height: 200px;
     background: #FFF;
     border-radius: 30px;
 }
 .content ::before {
     content: '';
     position: absolute;
     top: -15px; right: -15px; bottom: -15px; left: -15px;
     background: #FAC;
     z-index: -1;
 }