背景与边框--边框内圆角

边框内圆角

有时需要一个容器,只在内侧有圆角,而边框或描边的四个角在外部仍然保持直角的形状,如下图所示.

I have a nice subtle inner rounding, don't I look pretty? 容器外围有一道边框,但只在内侧有圆角

如何做到只用一个元素来达成同样的效果?

解决方案

上述方案更加灵活一些,它允许我们充分运用背景的能力.比如如果我们希望这一圈"边框"不只是纯色,而是要加一层淡淡的纹理,也可以很容易地做到.

不过如果只实现简单的实色效果,也可以用一个元素,但具有一些hack味道,如下:

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

I have a nice subtle inner rounding, don't I look pretty? 容器外围有一道边框,但只在内侧有圆角

受益于两个事实:描边不会跟着元素的圆角走(因而显示出直角),但box-shadow却会,因此两者叠加一起时,box-shadow会刚好填补描边和容器圆角之间的空隙.

background: tan;
border-radius: .8em;
padding: 1em;
outline: .6em solid #655;

没有box-shadow时

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;

没有outline时

为box-shadow属性指定的扩张值并不一定等于描边的宽度,只需要指定一个足够填补"空隙"的扩张值即可,事实上指定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常,因此推荐一个稍小些的值.一个新问题:到底多大的投影扩张值可以填补这些空隙呢?

需要用到勾股定理,用于计算直角三角形各边的长度.勾股定理表明,如果直角边分别是a和b,则斜边(正对着直角的最长边)等于根号下(a方+b方),当两条直角边的长度相等时.这个算式会演化为:

$\sqrt{2a^2}=a\sqrt{2}$

如果border-radius是.8em,那么最小扩张值就是:

$\mathrm{0.8}(\sqrt{2}-1)\approx \mathrm{0.33137085}\mathrm{em}$

需要做的就是把它稍微向上取个整,把0.34em设置为投影的扩张半径.为了避免每次都要计算,可以直接使用圆角半径的一半,因为:

$\sqrt{2}-1<\mathrm{0.5}$

该计算过程揭示了这个方法的另一个限制:为了让这个效果达成,扩张半径需要比描边的宽度值小,但它同时又要比

$(\sqrt{2}-1)r$

大,r指border-radius,也即意味着如果描边宽度比

$(\sqrt{2}-1)r$

小,就不可能用该方法达成效果.

当我们的圆角半径是r时,从圆角的圆心到描边顶角的长度就是

$r\sqrt{2}$

这意味着投影的扩张值就不能小于

$r\sqrt{2}-r=(\sqrt{2}-1)r$