css魔法系列(4)

原创 雨花茶 随笔 css 335阅读 2017-05-19 15:42:30 举报

4.边框内圆角
效果图见代码展示。
方案1
html 代码

方案二
我们要说的重点
能不能利用一个元素标记来实现呢?是可以的。
首先用border-radius来画出一个圆角来,利用outline来画一个边框。效果如下:
我们发现4个角有空白,outline没有按照圆角来描边。这要怎么办呢。我们可以利用box-shadow来填补空白。
html 代码

改进后的效果:
html 代码

你也许会问,我怎莫知道我应该设置多大的扩张半径来填补空白呢?
有一个规律是box-shadow的扩展半径小于outline的宽度。大于等于border-radius的值的一半。
在这个范围的值保证了box-shadow不会超过outline。
你这个规律是怎么来的?通过数学计算勾股定理啥的,篇幅有限在这个就不赘述,感兴趣的可以自己研究下。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复