用一个元素来实现边框内圆角

用一个元素来实现边框内圆角

 2016-09-26 08:17    网页设计   标签：css   674    发表评论

我说，这里面应该有个内圆角吧

如图，我们常常会遇到这样的一个图形。在一个容器里，内边框是个圆角，外框是直角。这样的情况一般会用两个元素来实现：

<div class="box">
    <div>我说，这里面应该有个内圆角吧</div>
</div>

.box{
    background:#1976D2;
    padding:.8em;
}
.box>div{
    background:#2196F3;
    border-radius:.8em;
    padding:1em;
}

这个方法很好，但我们考虑下有没有更好的呢，因为我们只需要一个元素。

之前我们在“多重边框”提到一个叫outline的描边参数。这个方法有个特性，就是(暂时)不会生成和元素一致的圆角。那么我们修改下看看效果如何：

我说，这里面应该有个内圆角吧

从上面可以看出中间有点留白了，这个时候我们又想到还有一个阴影可以运用。那么整理下，我们的代码就变成这样：

<div class="box">
    我说，这里面应该有个内圆角吧
</div>

.box{
    background:#2196F3;
    border-radius:.8em;
    padding:.8em;
    box-shadow:0 0 0 .6em #1976D2;/* 阴影 */
    outline:.6em solid #1976D2;/* 描边 */
}

注意阴影面积

我们今天说的这个其实并不是很难，但实际上有一个问题还有待解决，那就是阴影到底多大就可以刚好遮盖住还不至于溢出？

回答这个问题我们就要请出中学时学习的勾股定理了。还记得勾三股四定五这个口诀吗？a²+b²=c²，反算下就可以得到结果了。