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

《对css3盒模型边框应用的研究》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、对CSS3盒模型边框应用的研究摘要：边框是CSS盒模型的重要属性之一，用好边框不仅可以起到增强页面视觉效果的作用，同时也可以提高外部资源的利用效率，降低页面加载的负荷。随着自适应布局页面的流行，边框的重要作用更加凸显出来，该文将重点研究边框的应用技巧。中国8/vie　　关键词：边框；盒模型；图片边框　　中图分类号：TP311文献标识码：A：1009-3044（2016）36-0115-02　　1背景　　盒模型是页面布局中的基础思想，通过对网页元素的盒属性进行设置而提升页面的用户体验。边框作为盒模型中的重要组成部分，被网页制作人员大量的使用。然而早期的边框属性，提供的边框样式过少，只能进行

2、一些简单的应用，对于一些复杂的边框，就束手无策，甚至只能使用大量的背景图片来替代，这不仅增加了页面的体积，不符合移动端网页设计的要求，同时也增加了页面加载的符合，降低了资源的利用效率。　　考虑到边框的特点，CSS3加强了边框的功能，提供了大量新的实用技术。尽管盒模型不断的改进和增加新的内容，但不少网页人对新技术的使用并不积极，主要原因有以下几点：　　1）新技术缺乏一定向下的兼容性，给技术人员造成一定负担；　　2）对熟悉的技术形成依赖，缺乏在技术上求新的动力　　3）技术标准还没有最终成型，技术人员缺乏学习的动力　　随着移动互联网的发展，新技术的流行是不可阻挡的，本文针对盒模型的边框属性做一

3、个详细的技术分析。　　2边框的属性　　在CSS中，与边框有关的属性都以border开头，依据盒模型的特点，边框分成了4个方向，可分别独立设置，但每个方向的边框都具备相同的属性。因而在此处，只针对边框的整体进行分析。　　2.1边框的宽度（border-age-age配套属性，也可用border-age）　　图片边框可以说是CSS3对边框增加的一项十分强大的功能。顾名思义，就是用图片代替线条作为边框使用，图片边框利用九宫格将图片划分，并按照分割对位应用，确保图片边框在拉伸中不变形，以适应各种比例的盒元素。具体使用方法将在后面做详细介绍。　　3边框技术难点详解　　边框属性中，新增的圆角边框与图

4、片边框具有一定技巧性，下面详细讲解一下这2个属性的使用。　　3.1圆角边框的难点应用　　圆角边框总共分为4个角，每个角对应2个边，例如：border-radius：15px10px，分别从水平和垂直方向截取15px和10px的长度构成圆角的弧度，当水平和垂直截取的长度刚好等于边长的一半，则会形成一个椭圆形，如果此时为正方形，则会形成一个正圆形，如图1所示：　　3.2图片边框的难点应用　　图片边框是css3增加的一项实用性非常强的功能，可以通过对4个角的保留，达到伸缩不变形的效果，其基本思想是利用九宫格将图片划分成9个区域，如图2所示：　　从图2可以看出，1，2，3，4四个区域分别为划出的

5、不可伸缩的角，5，6，7，8四个区域都为直线，可以任意伸缩而不产生变形，而区域9正好是内容所在的位置，所以默认为透明，除非显示的设置参数来实现改变。　　最后，关键的问题就落具体如何实现划分九宫格的4条线上了，这里只需通过设置属性border-image-slice即可实现，共有4个值，分别按照图2中a（上），b（右），c（下），d（左）四条线的顺序来划分图片，产生距离上右下左四个边的距离，如border-image-slice：10px20px30px40px表示距离上边框10px，右边框20px，下边框30px，左边框40px处分别按照abcd的顺序划出九个区域。最后，设置适当的边框宽

6、度，就可以实现在不同大小的盒子上共用一张图片作为边框的目的。　　4结束语　　随着W3C标准在各个浏览器下的逐步兼容统一，不仅边框的作用将会越来越强大，更多强大的技术会逐步流行起来，成为网页制作的一把利器！