CSS魔法堂：重拾Border之--更广阔的遐想_html/css_WEB-ITnose

前言

 当css3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真的懂border吗？"。本系列将稍微深入探讨一下那个貌似没什么好玩的border！
《css魔法堂：重拾border之——解构border》
《css魔法堂：重拾border之——图片作边框》
《css魔法堂：重拾border之——不仅仅是圆角》
《css魔法堂：重拾border之——更广阔的遐想》

当Border-Radius遇上Mr. X

 也许大家会觉得通过滑动门已经能实现尺寸有限下的容器圆角效果，而CSS3中的Border-Image更能完美实现容器尺寸无下限的圆角效果，那为什么还要引入Border-Radius呢？代理十分简单啦，无论是滑动门还是Border-Image技术，它们均以图片作为圆角的基础，而Border-Radius则是通过数学中的几何图形来画圆角。也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。因此通过Border-Radius再结合其他与未知变量相关的属性，变化可真是无穷无尽哦！

当Border-Radius遇上border-style

<style type="text/css">.target{  width: 0;  height: 0;  border: 60px double #F00;  border-radius: 50%;}</style><div class="target"></div>

当Border-Radius遇上Transition

更多变化的角byborder-corner-shape

 border-corner-shape作为即将引入的特性，为我们提供更多形状的角的可能。具体可参考border-corner-shape
border-corner-shape: curve | bevel | notch | scoop
curve:默认值，圆角
bevel:切角，其实就是沿与相交线的垂直线切割掉直角
notch:凹槽
scoop:向内凹的圆角

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

立即学习“前端免费学习笔记（深入）”；

总结

感谢

《The Humble Border-Radius》