对CSS3盒模型边框应用的研究

摘要：边框是CSS盒模型的重要属性之一，用好边框不仅可以起到增强页面视觉效果的作用，同时也可以提高外部资源的利用效率，降低页面加载的负荷。随着自适应布局页面的流行，边框的重要作用更加凸显出来，该文将重点研究边框的应用技巧。

关键词：边框；盒模型；图片边框

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）36-0115-02

1 背景

盒模型是页面布局中的基础思想，通过对网页元素的盒属性进行设置而提升页面的用户体验。边框作为盒模型中的重要组成部分，被网页制作人员大量的使用。然而早期的边框属性，提供的边框样式过少，只能进行一些简单的应用，对于一些复杂的边框，就束手无策，甚至只能使用大量的背景图片来替代，这不仅增加了页面的体积，不符合移动端网页设计的要求，同时也增加了页面加载的符合，降低了资源的利用效率。

考虑到边框的特点，CSS3加强了边框的功能，提供了大量新的实用技术。尽管盒模型不断的改进和增加新的内容，但不少网页人对新技术的使用并不积极，主要原因有以下几点：

1）新技术缺乏一定向下的兼容性，给技术人员造成一定负担；

2）对熟悉的技术形成依赖，缺乏在技术上求新的动力

3）技术标准还没有最终成型，技术人员缺乏学习的动力

随着移动互联网的发展，新技术的流行是不可阻挡的，本文针对盒模型的边框属性做一个详细的技术分析。

2 边框的属性

在CSS中，与边框有关的属性都以border开头，依据盒模型的特点，边框分成了4个方向，可分别独立设置，但每个方向的边框都具备相同的属性。因而在此处，只针对边框的整体进行分析。

2.1 边框的宽度（border-width）

边框宽度主要由border-width进行设置，通常默认为3px，可以是绝对值px，也可以使用相对单位来设置。依据CSS属性缩写的规则，凡是带方向的属性，都可以按顺时针方向，以上作为起点，一次性进行设置，例如border-width：1px 2px 3px 4px，分别为上1px，右2px，下3px，左4px。CSS3增加了一个对边框宽度设置的属性border-image-width，此属性为boder-image配套属性，也可用border-width替换。

2.2 边框样式（border-style）

边框样式是边框显示中的必要属性，需要显示声明。边框样式主要分为无轮廓和有轮廓样式，有轮廓樣式有：hidden（隐藏边框），dotted（点状轮廓），dashed（虚线轮廓），solid（实线轮廓）double： （双线轮廓）， outset（3D凸边轮廓） ，ridge（3D凸槽轮廓）， groove（3D凹槽轮廓），inset（3D凹边轮廓）。边框样式同样可以针对4个方向的边框进行独立的设置，例如：border-style：dotted dashed solid groove。

2.3 边框颜色（border-color）

边框颜色的使用相对比较简单，但许多人通常只会设置纯色，殊不知边框也可以设置透明度，只需使用CSS3增加的新的色彩模式rgba即可。例如border-color：rgba（255，0，0，.5），将边框设置为半透明的红色。

2.4 边框圆角（border-radius）

早期的网页制作人员，深知圆角之痛。CSS2时代，由于没有提供有效的解决圆角的方案，所以大多时候都使用圆角的图片作为背景来实现圆角效果。CSS3弥补了边框这一功能。border-radius正是针对圆角进行设置，每个角以关联的两个边划分圆角的弧度，如：border-radius：5px 。

2.5 图片边框（border-image）

图片边框可以说是CSS3对边框增加的一项十分强大的功能。顾名思义，就是用图片代替线条作为边框使用，图片边框利用九宫格将图片划分，并按照分割对位应用，确保图片边框在拉伸中不变形，以适应各种比例的盒元素。具体使用方法将在后面做详细介绍。

3 边框技术难点详解

边框属性中，新增的圆角边框与图片边框具有一定技巧性，下面详细讲解一下这2个属性的使用。

3.1 圆角边框的难点应用

圆角边框总共分为4个角，每个角对应2个边，例如：border-radius：15px 10px，分别从水平和垂直方向截取15px和10px的长度构成圆角的弧度，当水平和垂直截取的长度刚好等于边长的一半，则会形成一个椭圆形，如果此时为正方形，则会形成一个正圆形，如图1所示：

3.2 图片边框的难点应用

图片边框是css3增加的一项实用性非常强的功能，可以通过对4个角的保留，达到伸缩不变形的效果，其基本思想是利用九宫格将图片划分成9个区域，如图2所示：

从图2可以看出，1，2，3，4四个区域分别为划出的不可伸缩的角，5，6，7，8四个区域都为直线，可以任意伸缩而不产生变形，而区域9正好是内容所在的位置，所以默认为透明，除非显示的设置参数来实现改变。

最后，关键的问题就落具体如何实现划分九宫格的4条线上了，这里只需通过设置属性border-image-slice即可实现，共有4个值，分别按照图2中a（上），b（右），c（下），d（左）四条线的顺序来划分图片，产生距离上右下左四个边的距离，如border-image-slice：10px 20px 30px 40px表示距离上边框10px，右边框20px，下边框30px，左边框40px处分别按照abcd的顺序划出九个区域。最后，设置适当的边框宽度，就可以实现在不同大小的盒子上共用一张图片作为边框的目的。

4 结束语

随着W3C标准在各个浏览器下的逐步兼容统一，不仅边框的作用将会越来越强大，更多强大的技术会逐步流行起来，成为网页制作的一把利器！

参考文献：

[1] 郑伟. 高职院校图形类专业实践教学研究[J]. 科技资讯， 2010（12）： 248.

[2] 郑伟. 关于《网页设计与制作》课程标准化建设实施方案的研究[J]. 电脑知识与技术， 2016， 7（12）： 158-159.

[3] 郑伟. 高职院校图形类专业《网页设计与制作》课程建设改革的探讨[J]. 艺术科技， 2013， 26（3）： 283.