边框内圆角

如果想给边框加上圆角，很简单，border-radius属性可以满足你的需要。

但是如果想要一个外边框呢？而且你并不想这个外边框的四角受内边框的影响呢？

简单又暴力的方法就是，俩div套一起。

<div class = "something-meaningful">

    I have a nice subtle inner rounding,

don't I look pretty?

</div></div>

.something-meaningful{

background:#655;

    padding:.8em;

}

.something-meaningful>div{

background:tan;

    border-radius:.8em;

    padding:1em;

}

一个有圆角，嵌在没有圆角的里面，配上不同的颜色，堪称完美有没有（手动狗头）

但是！

如果只用一个元素可以吗？

可以。

这个方法用到了两种属性，前一种上一篇说过了，outline，就是制造多重边框的那个，还有一个属性，box-shadow。废话不多说，上代码。

<div class="something-meaningful">

    I have a nice subtle inner rounding,

don't I look pretty?

</div>

.something-meaningful {

background:tan;

    border-radius:.8em;

    padding:1em;

    box-shadow:0 0 0 .6em #655;

    outline:.6em solid #655;

}

可以看到效果是这样的

PS：为了和上面效果基本一致，我加了1em的margin，与本次无关

基     本     一     致

下面是原理讲解。首先，outline是不会跟着圆角走的（1），而box-shadow则不是，也就是说，我们需要用box-shadow把圆角产生的空白补齐。

注释掉box-shadow之后的效果

另外，box-shadow的取值也很关键，如果取大了，很可能造成渲染异常。个人推荐的范围是圆角半径的一半。至于精确计算，可以使用勾股定理，在此不再赘述。