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

 2016-09-26 08:17
我说,这里面应该有个内圆角吧

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

<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²,反算下就可以得到结果了。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: