对CSS3盒模型边框应用探究.docVIP

对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个角的保留，达到伸缩不变形的效果，其基本思想是利用九宫格