@边框内圆角

怎么样能仅用一个div来实现下面图片当中的边框内圆角效果呢？

（调色略丑，为了效果明显。）

CSS Secrets @边框内圆角 - CSS娃娃 - CSS娃娃的博客

这个时候脑子里面迅速闪现出能够实现边框效果的东西：border、outline、box-shadow...
因为要有圆角border-radius，而且之前讲到outline是不会随border圆角而变化的，所以一定要用到outline才行！
好哒，那就在base的css基础上先加上一个outline：

.wrapper{
    margin: 135px auto;
    width: 200px;
    height: 100px;
    padding: 1em;
    background: lightblue;
    border-radius: 1em;
    outline: .8em solid dodgerblue;
}

然后就变成了酱紫：

CSS Secrets @边框内圆角 - CSS娃娃 - CSS娃娃的博客

缺了四个角。用什么补？border肯定是不行。因为之前也讲过，outline对border很宽容，outline一定要把border紧紧抱在里面，绝对不允许它俩之间有间隙。那么，既然border办不到，就只能是用box-shadow了。
先随便写个小一点儿的box-shadow（为了区分，先和outline的颜色不一样）看下效果：

.wrapper{
    margin: 135px auto;
    width: 200px;
    height: 100px;
    padding: 1em;
    background: lightblue;
    border-radius: 1em;
    outline: .8em solid dodgerblue;
    box-shadow: 0 0 0 .25em lightpink;
}

CSS Secrets @边框内圆角 - CSS娃娃 - CSS娃娃的博客
阿咧？好像小粉粉把白色的角补上了一丢丢呢。。。
那我把box-shadow弄大点儿（大过outline的宽度）看看呢？

.wrapper{
    margin: 135px auto;
    width: 200px;
    height: 100px;
    padding: 1em;
    background: lightblue;
    border-radius: 1em;
    outline: .8em solid dodgerblue;
    box-shadow: 0 0 0 1em lightpink;
}

CSS Secrets @边框内圆角 - CSS娃娃 - CSS娃娃的博客
超出去了。。。box-shadow的大小一定不能超过outline的宽度！但是也不能太小，最小到什么程度呢？

绝对不能小于（√2 -1padding*的宽度。
（这是一个正方形和它的内切圆的故事，我相信宝宝们一画图就懂了。）

So in total, 我们的解决办法就是一层outline作为方边，加上一层box-shadow来补上空隙，
而** （√2 -1）padding.width < box-shadow.width < outline.width*，就是对box-shadow的要求。
那咱就写一个范围内的值试一下，

.wrapper{
    margin: 135px auto;
    width: 200px;
    height: 100px;
    padding: 1em;
    background: lightyellow;
    border-radius: 1em;
    outline: .8em solid dodgerblue;
    box-shadow: 0 0 0 .5em lightpink;
}

CSS Secrets @边框内圆角 - CSS娃娃 - CSS娃娃的博客

**酱~ **感觉补得刚刚好呢！

最后最后说句废话，那就是只要把box-shadow的颜色改成和outline一样的颜色就好了！