注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】CSS3 边框图片  

2014-05-20 09:30:18|  分类: CSS3小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自云谦小记《CSS3 边框图片》
 border-image也是CSS3的一个重要的组成部分(慎用,IE10以下不支持),支持border-image 属性的有IE11, Firefox, Opera 15, Chrome 以及 Safari 6  。Safari 5 支持替代的 -webkit-border-image 属性。
以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等)那么我们以后就可以通过border-image这个属性改变以前的一切,可以给边框设置不同的图片效果。

首先我们来看一下与border-image相关的一些属性
1、引入图片:border-image-source;

2、切割引入的图片:border-image-slice;:

3、边框的宽度:border-image-width;

4、图片的排列方式:border-image-repeat。

下面就详细的来介绍上面的四个属性的使用方法和其各自的特性,从而更好的深化border-image的相关知识点。在实际开发中不会像下面这样分开来写,为了理解,才分开写。合起来怎么写后面讲到:
用一个div来举例,需要一张图片(名为border,jpg):
CSS3 边框图片 - 云谦小记 - 云谦小记border.jpg
 首先,我们来看一下border-image-souce属性,它就像background-image一样,也采用url()作为它的值.
代码测试:

width:300px;
height:100px;
border:30px solid transparent;
border-image:url(border.jpg);

效果如下
CSS3 边框图片 - 云谦小记 - 云谦小记
 对于border-image-slice属性,其实就是对图片的切割,border-image-slice可以取1-4个值,它就像border-width一样,它的几个值遵循上、右、下、左(top、right、bottom、left)的原则,但这几个值是不能带单位的,可以取数字或百分比,当取数字时默认单位为像素(px)。刚才我们提到了切割,那么它是怎么切割的呢?假如取四个值30% 20% 40% 10%,那么切割图如下:
CSS3 边框图片 - 云谦小记 - 云谦小记
 看,像不像9宫格呢?其实border-image-slice就是把边框图片分为了9个部分,假如改属性取一个值33%,那么就把边框图片分成了9等份。

                CSS3 边框图片 - 云谦小记 - 云谦小记
 我们写一个效果

.box{
width:300px;
height:50px;
border-width:30px;
border-image:url(border.jpg) 33%;
}

效果展示如下:
CSS3 边框图片 - 云谦小记 - 云谦小记
我们在分析一下这个图:

                      CSS3 边框图片 - 云谦小记 - 云谦小记
   其实1、3、7、9部分好像没有发生大的变化,它们仍然分布在四个角上,而2、4、6、8部分却发生了变化,它们看起来是被拉伸了。
其实我们可以这样理解,四个角(1,3,7,9)是没有任何展示效果的,不会平铺也不会拉伸,因此我们可以把它们称作盲区。而(2,4,6)这几个部分才是要展示的,向前面的效果图一样,被拉伸了。对与这种现象,它是由border-image-repeat属性决定的,那么下面我们就看看它有哪些参数。
border-image-repeat属性共有3个值:stretch(拉伸)、repeat(重复)、round(平铺),其中stretch是默认值。在使用时可以取1到2个参数,比如:

border-image:url(border.jpg) 33%;

就等同于

border-image:url(border.jpg) 33% stretch stretch;//表示水平方向和垂直方向均使用stretch参数,即水平方向和垂直方向都拉伸来填充边框背景图。stretch为默认值。

对于stretch(拉伸)在前面有个例子,这里就不在多说了,下面我们就详细的区分一下round和repeat。

round指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
示例代码:

.box{
width:300px;
height:50px;
border-width:30px;
border-image:url(border.jpg) 33% round round;
}

CSS3 边框图片 - 云谦小记 - 云谦小记

repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
示例代码:

.box{
width:300px;
height:50px;
border-width:30px;
border-image:url(border.jpg) 33% repeat repeat;
}


CSS3 边框图片 - 云谦小记 - 云谦小记
 
  评论这张
 
阅读(33)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018