CSS3 border

2021-01-20 13:31 jianzhan

1、border-image的适配性
border-image能够说是CSS3中的1员将军,未来1定会大放风彩,其运用发展潜力真的是是非非常的惊人。可是现阶段适用的访问器比较有限,仅Firefox3.5,chrome访问器,Safari3+适用border-image。因此,就本文而言,IE访问器能够回家了歇息了,Firefox3及其下列和Opera访问器还可以歇息去看《阿凡达》了。因此,本文出示的1些demo网页页面,要在Firefox3.5+,chrome或Safari3+访问器下才能够看到实际效果。

2、熟习border-image的1些特点
大家将会针对CSS2中的background特性较为熟习,比如:background:url(xx.jpg) 27px no-repeat;
指代的是照片(url(xx.jpg)),部位(27px),反复性(no-repeat)。

border-image于此相近,border-image包含照片,裁剪部位(与background部位1样,也是标值,也适用百分值),反复性。比如:border-image:url(border.png) 27 repeat;,指的便是照片(url(border.png)),裁剪部位(27),反复方法(repeat)。试着比照background,这有助于border-image特性的记忆力。

实际叙述border-image的主要参数
border-image的主要参数便是上面提到的3个:照片,裁剪部位,反复性。
1、照片(border-image-source)
与CSS2中background-image特性1样,border-image的情况图应用url()启用,照片能够是相对性相对路径或是肯定相对路径,还可以不应用照片,即border-image:none;

2、照片裁剪部位(border-image-slice)
此主要参数特性较为独特:
1、沒有企业,专指像素。这相近于flash的as脚本制作,舞台高宽,影片剪辑尺寸,位移立即便是1个标值,沒有企业,由于默认设置企业便是像素(px)了。比如:border-image:url(border.png) 27 repeat;这里的27专指27像素。

2、适用百分比值,百分比值尺寸事相对边框照片而言,假定边框照片尺寸为400px*300px,则20%的具体实际效果便是裁剪了照片的60px 80px 60px 80px的4边尺寸。

3、裁剪特点。假如您对CSS中clip特性(clip:rect(auto, auto, auto, auto))较为掌握,则这里了解就会轻轻松松些。clip能够说是CSS中1个肆无忌惮的裁剪特性,而此处的特性尽管表意上并不是裁剪,可是在border-image实际效果的完成上来讲,就仿佛是个裁剪专用工具,把边框照片4分5裂,再再次安装,形变。其有1~4个主要参数,其方向标准合乎CSS广泛的方向标准(与margin,padding等或border-width1致),上右下左顺时针,再授予裁剪的含意,举个简易的事例,前面提到,适用百分比宽度,因此这里“30% 35% 40% 30%的”示意能够用下图表明:

看图讲话便是,离照片上部30%的地区裁剪1下,在右侧35%的地区裁剪1下,在离底部40%的地区剪裁1下,在距左侧30%的地区也裁剪1下。因而一共对照片开展了“4刀切”,产生了9个分离出来的地区,这便是9宫格,这是下面深层次解读border-image的基本。

3、反复性(border-image-repeat)
这里的反复性有别于background的情况反复,区别较大。background照片便是反复,不反复,水平反复,竖直反复,总而言之便是紧紧围绕repeat(反复)这个词打转,1家独大。而针对border-image,可以说是3足鼎力,repeat(反复)只是在其中之1,其余两个是round(平铺)和stretch(拉伸)。在其中,stretch是默认设置值。

主要参数0~2个,0则应用默认设置值 – stretch,比如:border-image:url(border.png) 30% 40%;就等同于于border-image:url(border.png) 30% 40% stretch stretch;;1则表明水平方位及竖直方位均应用此主要参数;2个主要参数的话则第1个主要参数表水平方位,第2个主要参数表明竖直方位。比如:border-image:url(border.png) 30% 40%;就等同于于border-image:url(border.png) 30% 40% round repeat;表明水平方位round(平铺),竖直方位repeat(反复),至于作甚平铺作甚反复下面会深层次解读。

3、深层次了解border-image的宽度和展现方法
分开了解border-image的宽度或是展现方法实际上不太难的,重要是这二者融合应用情况下的含意,必须花1定的时间的了解。

协助了解的9宫格实体模型
作甚9宫格?为何大家必须9宫格协助了解?

“9宫格”是在我国书法史上临帖写仿的1种界格,又叫“9方格”,即在纸上画出若干大气框,再于每一个方框内分出9个小方格,便于对比法帖范字的笔划位置开展练字。在本文,“9宫格”就专指由9个方格产生的矩形框合理布局,比如左图便是1个很简易的数据9宫格。

border-image的标值主要参数实际上是用来裁剪边框照片的,恰好“哗哗4刀”切出了个9宫格的实体模型,因此,成心或不经意,偶合還是必定,大家必须用到9宫格实体模型协助大家了解border-image的绘图基本原理。下面这张图是本文十分关键的基础的示用意,由于这是张具备意味着性的9宫格图案设计(27*3)*(27*3)。
<————————>

这张图可以协助大家更好的了解border-image的裁剪及绘图的基本原理。

边框将border-image分为了9一部分:border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image和正中间的內容地区。假定如今边框的宽度是27像素,则上面所说的9一部分正以下图所表明的(变大400%):

左图中,橙鲜红色的4个边角的菱形地区称为“角边框照片”,在border-image中,角边框照片是沒有任何展现实际效果的,不容易平铺,不容易反复,也不容易拉伸,有点相近于视觉效果中盲点的意思。

而对边的4个橙黄色地区属于展现实际效果的功效区(也是边框宽度测算剩下区),左右地区即border-top-image和border-bottom-image地区遭受展现实际效果特性的第1个主要参数——水平方位实际效果危害:假如为repeat,则此地区照片会水平反复,假如是round,则此框框内的照片会水平平无奇铺,假如是stretch,则此矩形框域中的照片就会被水平拉伸。(下一部分的案例会做实际演试)上下地区仅有竖直方位上的实际效果,与左右地区实际效果对应,很少说。

正中间的地区(左图的空白格)遭受所有主要参数的功效,在水平静竖直两个维度上都有展现实际效果(平铺、拉伸等)。

这里,插1点內容,讲1下round(平铺),repeat(反复),stretch(拉伸)所实际指代的实际效果。这3个特点实际上大伙儿应当都较为熟习。看下图:

在windows系统软件桌面上壁纸显示信息方法选项中就有“拉伸”和“平铺”,这两个实际效果与border中“拉伸”和“平铺”实际效果1致。只是将会在了解“平铺”和“反复”的差别上有点丈2的僧人——摸不着大脑。记牢这么1点:平铺将会会更改了原照片显示信息的尺寸,反复不更改照片显示信息的尺寸。

这么比如吧,您从万科地产买了个99.5m*99.5m的毛坯房,路面要贴瓷砖,全是1m*1m的正方形瓷砖。假如是“平铺”,对不起,这1m边长的瓷砖不好,要解决!如何解决法?很简易,每一个瓷砖压成0.995m*0.995m的,这样便可以了,因此,平铺便是以详细的模块铺满全部地区。假如是反复,就立即把这1m*1m的瓷砖从1个角落1个1个的置放,放到头放不下了如何办?立即把瓷砖从正中间“咔”掉,因而最终会在房屋的边角看到许多半截的瓷砖。下面便是1个个的案例演试了,您能够根据下面的案例实际效果中加深了解。

协助了解的1些案例
下面的案例编码对应的demo网页页面要在Firefox3.5、chrome或Safari3+访问器下才能够看到实际效果。所应用的情况照片便是前面提到的9宫格意味着图(8菱形 – 81px*81px),名字为border.png。

1、27像素裁剪宽高(1/3边框照片宽高)在1em边框宽度下的默认设置显示信息
CSS编码:

拷贝编码
编码以下:

.border_image{
width:400px;
height:100px;
-moz-border-image:url(../image/border.png) 27;
-webkit-border-image:url(../image/border.png) 27;
border:double orange 1em;
}

結果:

您能够狠狠地址击这里:案例demo1

实际效果剖析:
这里沒有显示信息方法的主要参数,正如上面所说的,0主要参数即便用默认设置的stretch拉伸,因此从图上能够看到4个对边的拉伸实际效果。上面还提到,4个对角是不会受到反复方法危害,该甚么模样還是甚么模样,无拉伸平铺,本相貌示人。见下图的标明(变大200%)。

这个9宫格各地区展现方法的标明图在border-image中是通用性的,不管border-image的编码怎样更改,其显示信息实际效果的基本原理关键便是左侧这张9宫标明图,亘古不会改变的是4个边角,这4个边角便是4条边框的重合地区,不容易有拉伸或是反复的呈现实际效果。有转变的便是4边地区和管理中心地区,这几个地区中的水平静竖直特性也是泰然自若,矗立不会改变的,更改的就只是“拉伸”罢了,变为反复啦或是平铺。

因为其通用性性,因此此显示信息基本原理标明图在下面就不11展现了,您寻找对应的部位,改动“拉伸”为“平铺”或“反复”便可,别的都无需更改。

2、27像素裁剪在1em边框宽度下round(平铺)显示信息实际效果
CSS编码:

拷贝编码
编码以下:

.border_image{
width:400px;
height:100px;
-moz-border-image:url(../image/border.png) 27 round;
-webkit-border-image:url(../image/border.png) 27 round;
border:double orange 1em;
}

結果:

您能够狠狠地址击这里:案例demo2

3、27像素裁剪在1em边框宽度下repeat(反复)实际效果
CSS编码:

拷贝编码
编码以下:

.border_image{
width:400px;
height:100px;
-moz-border-image:url(../image/border.png) 27 repeat;
-webkit-border-image:url(../image/border.png) 27 repeat;
border:double orange 1em;
}

結果:

您能够狠狠地址击这里:案例demo3

上图我圈了4个边角,不难发现,这1个边角处的菱形全是被截掉的。这便是repeat的实际效果,还记得上面的毛坯房的事例吗?round会缩小(或屈伸)照片尺寸使其恰好在地区内显示信息,而repeat是无论372101立即反复的,并且是垂直居中反复,repeat从正中间刚开始(这是我的观查,将会禁止确)。

这里也有1点必须留意:在webkit关键的访问器下这个round特性和repeat特性好像沒有沒有区别,显示信息的实际效果是1样的,因此您在chrome访问器或是Safari访问器下看demo2和demo3的实际效果将会是1样的。Firefox3.5下能够精确区别这两个主要参数。

4、上案例款式缩写
上面的案例还能够进1步缩写。CSS以下:

拷贝编码
编码以下:

.border_image{
width:400px;
height:100px;
-moz-border-image:url(../image/border.png) 27/1em repeat;
-webkit-border-image:url(../image/border.png) 27/1em repeat;
border:double orange 1em;
}

完成的实际效果是1样的。您能够狠狠地址击这里:案例demo4

border-image绘图基本原理简述
我是这样了解的:共存在两个9宫格,1个是边框照片,也有1个便是边框自身,9个方向关联11对应。边框自身的特点让其变为了1个9宫格,4条边框交叠,再加其围起来的地区,恰好产生1个9宫格。边框照片则是根据照片裁剪完成了9宫格。这是了解绘图基本原理的基本。

1、启用边框照片
border-image的url特性,根据相对性或肯定相对路径连接照片。

2、边框照片的裁剪
border-image的标值主要参数裁剪边框照片,产生9宫格。

3、裁剪照片填充边框
边框照片被激光切割成9一部分,以11对应的关联放到div边框的9宫格中,随后再缩小(或拉伸)至边框(border-width或border-image-width)的宽度尺寸。

4、实行反复特性
被填充至边框9宫格4个角落的的边框照片是不实行反复特性的。左右的9宫格实行水平方位的反复特性(拉伸或平铺),上下的格子实行竖直方位的反复特性,而正中间的那个格子则水平反复和竖直方位的反复都要实行。

5、进行绘图,完成实际效果

绘图基本原理动漫示意,本flash动漫以第1个demo实际效果做示例,请点一下在其中的“下1步”按钮,可看到1步1步的演试:

4、border-image的1些运用
自融入的圆角实际效果
应用照片以下:

此照片的裁剪宽度为20像素,基础上便是此图的圆角尺寸。div的边框宽度为10像素,其CSS关键款式以下:

拷贝编码
编码以下:

.border_image{
-moz-border-image:url(../image/rounded_corner.png) 20/10px;
-webkit-border-image:url(../image/border.png) 20/10px;
}

結果以下:

您能够狠狠地址击这里:圆角实际效果demo

多边框实际效果
应用照片以下:

圆角和边框尺寸全是20,就不上CSS编码了,大同市小异。终实际效果以下图:

您能够狠狠地址击这里:多边框实际效果demo

投射实际效果
应用素材照片以下:

裁剪宽度和边框宽度全是2 5 6 2,这里的投射我立即应用photoshop的投射款式转化成的,发现用在边框投射上有1点点不够,必须手动式调剂,截取投射的4边,和反复地区再拼合1下,您能够自身试试假如完成最好的投射实际效果。

实际效果以下图:

您能够狠狠地址击这里:投射实际效果demo

选项卡
自融入选项卡,CSS2中完成自融入选项卡必须将情况照片制做的较长,并且必须双层标识,可是在CSS3中,照片要短,且1个标识便可以搞定。比如,这是淘宝新主页检索选项卡的情况照片(已裁剪),,如果应用border-image,要是值么点图便可以了,

边框照片裁剪尺寸和边框宽度全是5 5 0;底边为0,其余全是5像素,結果实际效果为:

您能够狠狠地址击这里:选项卡demo

别的
也有许多别的的运用,之前大家制做渐变色情况,1张情况图非常少能够反复应用,而有了border-image后就不容易有这样的难题了,由于其能够拉伸。大家还能够运用border-image做高光按钮,做自融入的popup会话框,这些,太多了,就不11举例了。

5、border-image实际效果的jQuery软件
正如刚开始所讲的,border-image仅Firefox3.5,chrome,Safari适用,IE这类访问器不适用,可是其实不意味着她们没法完成相近的实际效果。比如运用canvas制图,可让Firefox2完成相近实际效果,IE下的VML語言也是适用矢量制图,而这些便是此jQuery软件完成相近border-image实际效果的基本原理或称之为关键。

您能够狠狠地址击这里:jquery.borderImage.js(软件js)

应用方式
最先必须启用jQuery库,随后便是上面出示的js文档了。方式为borderImage,以下面的示例编码:

$('#element').borderImage('url("border.png") 30% 35% 40% 30%');

对此软件我本人点评不高,缘故以下:
1是IE6及以上还可以完成相近canvas实际效果(需js软件适用),沒有必要改动头顶部甚么再应用VML制图;
2是适配性较差,IE6下没法完成高宽敞于100像素的边框的拉伸;IE8下貌似也是有点难题。

因此,我不实际说,1带而过。

您能够狠狠地址击这里:border-image实际效果jQuery软件demo

6、总结
从本文的篇数能够看到border-image的发展潜力简直很惊人,我能够觉得到这可能是CSS3中的重磅武器装备之1。本文绝大多数的活力是在解读border-image的基本原理,由于我十分看好border-image的运用市场前景,因此尽量细腻的讲明楚border-image各个特性的含意,让即便初学者也能较好的了解border-image的含意,本文例举的几个运用能够说只是border-image最基础的些运用。假如再加些艺术创意的思索和宏昌行空的想像,真不知道border-image能够造就出甚么奇特的事儿来。

我刚开始深层次学习培训CSS3层面的物品也只是近期刚开始,这物品,非要投入进到,你才会体会到这东西简直酷,太不能思议了。我如今能够想像假如CSS3的全球来临,那时,网页页面可能是多么的精彩的1个全球。好了,就说这些,相互发展吧。

7、参照內容
1、百度搜索百科,9宫格:http://baike.baidu.com/view/230179.htm?fr=ala0_1_1
2、W3C官方文本文档: CSS Backgrounds and Borders Module Level 3
3、CSS3汉语手册
4、Meet a ninja living in browsers

假如您发现文章内容中有描述禁止确或是有有关难题必须沟通交流能够根据评价或是去这里开展发问沟通交流。
转载请注明来自张鑫旭