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

lingdududu 发布于2019-08-30 13:00 / 1916人阅读

摘要：本系列将稍微深入探讨一下那个貌似没什么好玩的魔法堂重拾之解构魔法堂重拾之图片作边框魔法堂重拾之不仅仅是圆角魔法堂重拾之更广阔的遐想解构说起我们自然会想起，而由条紧紧包裹着的边组成，所以的最小操作单元是。

前言

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

解构Border

说起border我们自然会想起border box，而border box由4条紧紧包裹着padding box的边(line)组成，所以border的最小操作单元是line。
line具有厚度(line thickness)、样式(line pattern)和颜色(line color)3个特性，因此我们必须也只能围绕它们做文章了！

Line Thickness

border-width:(medium|thin|thick|){1,4}
默认值medium，当font-size为17px或以下时，medium为1px、3px或5px，具体有UA决定。
大小关系：thin <= medium <= thick
另外有4个子属性border-top/right/bottom/left-width:medium|thin|thick|

Line Color

border-color:(|transparent){1,4}|inherit
默认值与color属性值一致

hello world

另外有4个子属性border-top/right/bottom/left-color:|transparent|inherit

Line Patterns

border-style:(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset){1,4}
默认值none，表示忽略border-color和border-width的属性值，打死不显示border。
hidden，效果与none一样，只是应用于border-collapsed的表格上时不会发生冲突而已。

注意：各浏览器的效果是有差异的哦！
另外有4个子属性border-top/right/bottom/left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

合体技——一次搞定Thickness、Pattern和Color

border: ? ?
其中和是可选，而为必填项。
另外有4个子属性border-top/right/bottom/left:? ?

自定义彩虹——border-top/right/bottom/left-colors

border-top/right/bottom/left-colors:(|transparent){1,}|inherit
多颜色border规则

颜色从外至内排列;

每种颜色占1px。若border-width大于颜色种类，则最后一种颜色占据剩余的宽度；若border-width小于颜色中类，则舍弃多余的颜色。
兼容性：就FF3.0+支持而已

总结

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

感谢

CSS Backgrounds and Borders Module Level 3 4. Borders

GPU云服务器云服务器 border border属性 border_box border-collapse

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

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

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

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

lily_wang 2019-08-30 13:01 评论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