边框内圆角

发表于 | 更新于 | 分类于 |
字数统计 336 | 阅读时长 1

边框内圆角就是只在盒子模型的内侧有圆角，而边框或者描边的四个角在外部仍然保持直角的形状。这个效果我们也有两种方式实现它。

双层 div 解决方案

使用双层 div 实现这个效果比较容易，只需为内层 div 设置圆角效果，然后给外层 div 设置背景色和一定的 padding 即可。

1
2
3
4
5
6
7
8
9
10
.inner-round {
    background: #655;
    padding: .8em;
}
.inner-round > div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
}

只使用一个元素

如果要求只使用一个元素，我们可以写出如下代码：

1
2
3
4
5
6
7
.inner-round {
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
}

由于 box-shadow 产生的阴影效果会沿着元素的圆角轮廓包裹元素，而 outline 产生的描边效果依然是矩形，所以我们可以通过结合二者做出边框内圆角效果。

这里的关键在于我们应该为阴影指定多大的扩张值以填补元素圆角与描边矩形间的空白。

假设圆角半径为 r，那么圆心到描边矩形内顶点的距离应该为 (√2 - 1)r，也就是说阴影效果的扩张值我们应该大于这个值，以填补圆角与描边之间的空白。