@边框内圆角

怎么样能仅用一个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一样的颜色就好了!

推荐阅读更多精彩内容