前端网页制作秘密武器之盒模型边框

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 引言

盒模型是CSS的一种基础设计模式，定义了Web页面中的元素是如何被看作盒子来解析的，而每一个盒子又有不同的展示方法接下来我们将详细的介绍一下边框的高级属性：圆角边框、图像边框。

2 .常用列表介绍

（1） 圆角边框

圆角边框可使页面看起来更加的舒服，使板块显得圆润而不失灵活。

基本语法：

派生的相关子属性有：border-top-right-radius、border-bottom-right-radius、border-top-left-radius、border-bottom-left-radius分别定义右上角、右下角左上角和左下角的圆角。

语法说明

• <length> 、<length>分别定义圆角形状的四分之一椭圆的两个半径（每个参数的允许设置1~4个参数值，对应4个派生子属性），第一个值表示圆角的水平半径，第二个表示圆角的垂直半径，两参数通过斜线分隔。
• 注意：如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一值为0，这个角则为矩形，不会是圆的。值不能为负值。

（2） 图像边框

boeder-image专门用于图像边框的处理，它的强大之处在于能够灵活地分割图像，并应用于边框。

基本语法：

子属性语法：

语法说明：

1）border-image是一个复合属性，设置成检索对象的边框样式使用图像来填充。

2）应用范围：所有元素，除了table的样式属性border-collapse是collapse时。

<border-image-source>：设置检索对象的边框是否用图像定义样式或图像来源路径。None表示无图背景，<image>使用绝对或相对地址，或者创建渐变色来确定图像。

<border-image-silce>：设置检索对象的边框背景图的分割方式。<number>用浮点数指定宽度，值不可为负值。<percentage>用百分比指定宽度，参考其包含区域进行计算，值不可为负值。fill保留裁剪后的中间区域,其铺排方式遵循<border-image-repeat>的设定。该属性指定从上、右、下、左方位来分隔图像,将图像分成4个角、4条边和中间区域共9份,中间区域始终透明，除非加上关键字fill。

<border-image-width>：设置或检索对象的边框厚度。该属性用于指定使用多厚的边框来承载被裁剪后的图像,该属性可省略。由外部的<boder-width>来定义。<length>用长度值指定宽度,<percentage>用百分比指定宽度,<number>用浮点数指定宽度,这些值皆不可为负值。

允许为负值。

<border-image-outset>：设置或检索对象的边框背景图的扩展。该属性用于指定边框图像向外扩展所定义的数值,即如果值为10px,则图像在原本的基础上往外延展10px再显示。<length>用长度值指定宽度,<number>用浮点数指定宽度, 这些值皆不可为负值。

<border-image-repeat>:设置或检索对象的边框图像的平铺方式。该属性用于指定边框背景图的填充方式,可定义0~2个参数值,即水平和垂直方向。如果两个值相同,可合并成一个,表示水平和垂直方向都用相同的方式填充边框背景图。如果两个值都为stretch,则可省略不写。stretch指定用拉伸方式来填充边框背景图repeat指定用平铺方式来填充边框背景图,即当图片碰到边界时,如果超过则被截断。round指定用平铺方式来填充边框背景图,即图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框,space指定用平铺方式来填充边框背景图,即图片会根据边框的尺寸动态调整图片之间的间距直至正好可以铺满整个边框

3.总结

盒模型可以千变万化，不一样的盒模型会产生不同的布局，对网页的布局等有很大的帮助。虽然刚开始学习盒模型时会有很多的困惑，但只要我们不放弃，就一定可以学会、学好、学精。

5.参考文献

【1】朱金华《网页设计与制作》北京：机械工业出版社，2018

更多精彩文章：

算法|从阶乘计算看递归算法

算法|字符串匹配（查找）-KMP算法

JavaScript|脚本岂能随意放置

开发|优秀的Java工程师的“对象”一定不错

谈一谈|2019蓝桥杯回顾与分享

where2go 团队

微信号：算法与编程之美

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！