CSS魔法堂：重拾Border之——更广阔的遐想

lily_wang 发布于2019-08-30 13:01 / 1219人阅读

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。

前言

当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

当Border-Radius遇上Transition

更多变化的角byborder-corner-shape

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

总结

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/5465268.html^_^肥仔John

感谢

《The Humble Border-Radius》

云服务器 GPU云服务器人工智能的遐想重拾创造与魔法云鸟便宜的服务器创造与魔法所有服务器的云鸟在哪

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115241.html

CSS魔法堂：重拾Border之——解构Border

摘要：本系列将稍微深入探讨一下那个貌似没什么好玩的魔法堂重拾之解构魔法堂重拾之图片作边框魔法堂重拾之不仅仅是圆角魔法堂重拾之更广阔的遐想解构说起我们自然会想起，而由条紧紧包裹着的边组成，所以的最小操作单元是。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现...

lingdududu 2019-08-30 13:00 评论0 收藏0
CSS魔法堂：重拾Border之——图片作边框

摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

linkFly 2019-08-30 12:59 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
CSS魔法堂：Box-Shadow 没那么简单啦:)

摘要：阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。实现原理纯个人理解创建一个与元素尺寸一致的阴影盒子将阴影盒子定位到于元素重合，并位于元素之上水平和垂直各画两条线，分别跟元素重合共条分别记为根据和移动。前言说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。二话不说看效果 showI...

Galence 2019-08-30 13:00 评论0 收藏0
CSS魔法堂：那个被我们忽略的outline

摘要：真心没法弄出圆角自从有了后，我们就可以通过制作圆角矩形圆形等图形，甚至连也受到影响从而实现元素阴影也能做到圆角的效果。那么是否也能做出圆角的效果呢答案是否定的。前言在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ ...

Rocko 2019-08-29 16:54 评论0 收藏0