有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图(1)。这是一个有趣的效果，目前还没有被滥用。用两个元素可以实现这个效果，这并没有什么特别的：
这是一个实例 (图1)
容器外围有一道边框，但只在内侧有圆角
这个方法很好，但要求我们使用两个元素，而我们只需要一个元素。有没有办法可以只用一个元素达成同样的效果呢？
解决方案
其实上述方案要更加灵活一些，因为它允许我们充分运用背景的能力。举个例子，如果我们希望这一圈“边框”不只是纯色的，而是要加一层淡淡的纹理，它也可以很容易地做到。不过，如果只需要达成简单的实色效果，那我们就还有另一条路可走，只需用到一个元素（但这个办法有一些 hack的味道）。我们来看看以下 CSS 代码：
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
你能猜到视觉效果是怎样的吗？它产生的效果正如上图所示。我们基本上受益于两个事实：描边并不会跟着元素的圆角走（因而显示出直角，参见图 2），但 box-shadow 却是会的（参见图 3）。因此，如果我 把这两者叠加到一起，box-shadow 会刚好填补描边和容器圆角之间的空隙，这两者的组合达成了我们想要的效果。图4 把投影和描边显示为不同的颜色，从而在视觉上提供了更清晰的解释。
这是一个实例 (图2)
对一个有圆角的元素使用 outli-ne 属性
这是一个实例 (图3)
对一个有圆角的元素使用没有偏移量、没有模糊效果的 box-shadow 属性
这是一个实例 (图4)
为了事情的真相看起来更清楚，我们把描边显示为黑色，把投影显示为品红色；请注意描边是绘制在上层的
请注意，我们为 box-shadow 属性指定的扩张值并不一定等于描边的宽度，我们只需要指定一个足够填补“空隙”的扩张值就可以了。事实上，指定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常，因此我推荐一个稍小些的值。这又引出了另一个问题：到底多大的投影扩张值可以填补这些空隙呢？ 为了解答这个问题，我们需要回忆起中学时学过的勾股定理，用来计算直角三角形各边的长度。勾股定理表明，如果直角边分别是 a 和 b，则斜边（正对着直角的最长边）等于 
。当两条直角边的长度相等时，这 算式会演化为
。 你可能还很纳闷，中学几何到底是怎么跟我们的内圆角效果扯上关系的？关于怎样用它来计算我们需要的最小扩张值，请看下图中图形化的解释。在我们的例子中，border-radius 是 .8em，那么最小的扩张值就是 0.8 (
-1 ) ≈ 0.331 370 85 em 。我们要做的就是把稍微向上取个整， 把 .34em 设置为投影的扩张半径。为了避免每次都要计算，你可以直接使用圆角半径的一半，因为 —1 < 0.5 。 
请注意，该计算过程揭示了这个方法的另一个限制：为了让这个效果得以达成，扩张半径需要比描边的宽度值小，但它同时又要比 ( −1)r 大（这里的 r 表示 border-radius）。这意味着，如果描边的宽度比 ( −1)r 小，那我们是不可能用这个方法达成该效果的。
相关阅读
CSS 背景与边框 http://w3.org/TR/css-backgrounds CSS 基本 UI 特性 http://w3.org/TR/css3-ui
