用一个元素来实现边框内圆角
我说,这里面应该有个内圆角吧
如图,我们常常会遇到这样的一个图形。在一个容器里,内边框是个圆角,外框是直角。这样的情况一般会用两个元素来实现:
<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²,反算下就可以得到结果了。