css3:border-image边框图像的详解(下)
发布在CSS3教程2014年9月28日view:6469
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

接着昨天~

假如你直接来到这篇下篇,那建议你赶紧回去补一下昨天写的上篇,border-image边框图像的详解(上),看完的童鞋,继续….

能不能控制图片边框的宽度,而不是每次都要调试盒子边框宽度?当然是有,下面就来介绍这个border-image-width这个可选属性值

边框图片宽度border-image-width

属性名称: border-image-width
值: [ <length> | <percentage> | <number> | auto ]{1,4}
初始值: 1

我叫border-image-width,我的作用就是代替盒子本身的边框宽度border-width。假如指定,那么边框图片宽度就由我来做主,假如不指定,那么图片边框宽度就由盒子的边框宽度来固定。我可以用具体像素、数字(表示几倍)和百分比来表示,最少1个值,最多4个值,分别代表上右下左图片边框宽度,注意哦,相关代码如下:

.border-image{ 
            border:20px solid #000;  //盒子边框宽度为20px
            border-image-source:url(border.png); 
            border-image-width:27px 1 10% 27px; //边框图片宽度设置为top:27px,right:1倍,bottom:10%,left:27px,因此这些值将代替20px成为图片边框宽度。
}

边框图片外凸border-image-outset

属性名称: border-image-outset
值: [ <length> | <number> ]{1,4}
初始值: 0s

我叫border-image-outset,我的作用就让边框背景延伸到盒子外。有两个属性值length和number,前者是具体的像素单位,后者是数字,最少1个值,最多4个,分别代表上右下左图片边框向外延伸的距离,相关代码如下:

.border-image{ 
            border:27px solid #000;  //盒子边框宽度为27px
            border-image-source:url(border.png); 
            border-image-outset:27px 27px 27px 27px; //边框图片向设置为27px,那么背景图将会从盒子最外边界向外上右下左各延伸27px。
}

border-image-outset延伸之前和延伸之后

边框图片重复border-image-repeat

属性名称: border-image-repeat
值: [ stretch | repeat | round ]{1,2}
初始值: stretch

我叫border-image-repeat,顾名思义,我的作用就让边框背景是否重复,默认值为stretch,是拉伸的意思,4个角4个区域分别做水平和垂直方向的拉伸,来填补边框的间隙;repeat是就是让4个角4个区域做完水平和垂直方向的复制图像,做CTRL+V运动,把边框之间的空隙填满;而round[环绕]是把4个角和4个区域分成均等区域,然后用背景图片切好能铺满整个边框空隙,不能多也不能少,正好合适。听说下面有demo↓:

.border-image-stretch{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:stretch;
}/*拉伸*/
.border-image-repeat{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:repeat;
}/*重复*/     
.border-image-round{ 
        border:27px solid #000; 
        border-image-source:url(http://img.xiaoho.com/2014/09/border.png);
        border-image-slice:27 27 27 27;
        border-image-repeat:round;
}/*环绕*/

效果如下:
border-image-repeat

可以点击这里查看完整:边框图片重复属性值
手机的童鞋可以拿出手机来扫~~
border-image-repeat

应用

对于应用来说,这个边框图片太强大了的,随便一折腾就可以弄出奇形怪状的边框来,使得边框不在拘泥于那些传统的线框。不管你是调slice值,还是repeat值、或者是outset值都可以变化很多新花招,刚刚我们其实在做demo展示的时候已经展现出来,那么下面我就用来一个一张图片构造最简单的我们的圆弧长方形。
用到图片:
border-image-repeat
效果如下:
border-image-repeat
更多详细demo,请点击:仅仅是图片宽度改变demo展示

结语

好了,就这么多了,这个属性目前对于IE来说真是渣渣,但是手机端上的兼容性还是非常友好的,假如你不想用老旧的线来构造一个边框的话,那么就换一张图片来构造丰富的边框样式吧,你会发现,css3的世界真是非常强大的。
预祝各位国庆愉快,希望29号回去路上不堵车,今年国庆要交份子钱的童鞋,请默默地点个赞,然后在评论中说出你的观点。
抛菊花

本文地址:http://xiaoho.com/?p=793
原创文章,转载请注明来自:◎小黑路人xiaoho.com

评论
发表评论
暂无评论
WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
CSS3教程

本栏目由“非CSS2”内容提供

要想找工作,要学好编程!MARK题.

———————————————————————————我是小黑 博客 微博

友情链接 大搜车前端团队博客
我的收藏