CSS3学习笔记 之 图片边框属性
2014-09-01 00:06
645 查看
简介
border-image属性的语法如下:border-image: source slice width outset repeat|initial|inherit;
各个参数含义如下:
source:图片地址,可以是相对或者绝对URL,如果这个值为none,表明边框没有图片
slice:可以使用1~4个值,用来表示各个边框背景图片的切割方式,注意,slice的值没有单位,因为默认的单位就是像素,这个参数比较复杂,后面会有详细的解说。
width:设置各个边框图片的宽度
outset:设置各个边框图片超出边框范围的大小,后面会有详细解说
上面其实是简写形式,border-image还可以分为如下几个单独的属性:
属性名称 | 属性含义 | 默认值 |
border-image-source | 边框图片的路径,可以是绝对URL或者相对URL | none |
border-image-slice | 设置边框向内的偏移(这个非常重要,后面会有详解) | 100% |
border-image-width | 设置边框背景图片的大小 | 1 |
border-image-repeat | 设置边框图片的排列方式(可能的取值有repeat,round,stretch) | stretch |
border-image-outset | 边框图片超出边框范围的大小,后面会有详解 | 0 |
border-image-source:
语法为:border-image-source(image-url);其中,image-url可以是绝对url,也可以是相对url,如果不想使用边框图片也可以使用none,表示没有图片
样例:
border-image-source: url("image.jpg");意思是将与CSS所在文件相同目录下的image.jpg当做边框图片
border-image-slice:
语法为:border-image-slice: [<number> | <percentage>] {1, 4} && fill ?这个属性相对比较复杂,我们先看看官方的解释:
这个属性规定了边框图片在top,right, bottom, left四个位置的向内偏移(inward offset),将图片切割为9个区域,四个角,四条边,还有一个中心区域,中心区域默认会被丢弃(即完全透明),除非设置了fill关键字,
<percentage> : percentage代表相对图片尺寸大小的比例,水平比例是根据图片的长度,垂直比例是根据图片的高度
<number>: number代表所占的图片像素数(当图片是光栅图的时候)或者向量坐标(当图片是矢量图的时候)
fill: 如果标明了fill关键字,则图片的中心部分会被保留。
下面我根据自己的理解说明一下这个属性的含义。
border-image-slice会将图片切割为9个区域,假设,我们有一个图片大小为300×240,我们在边框图片中为其设置如下样式:
border-image-source: url("image.jpg"); border-image-slice: 25% 30% 15% 20%
最终会将图片切割为9个区域,效果如下:
即,border-image-slice后面可以跟最多四个值,这四个值也遵循我们在边框颜色这篇文章中讲到的Top/Right/Bottom/Left(即顺时针方向)这个原则,设置的非别是上边框,右边框,下边框和左边框的样式。
四个值中的第一个25%的含义是,从图片的最上边沿向下切割相对图片高度25%的长度,也就是240像素×25%=60像素,剩下的三个原理与之相同,这样,根据上面的示意图,四条线最终将图片切割为9个区域,用文字加表格表示如下9个区域:
top-left | top | top-right |
left | center | right |
bottom-left | bottom | bottom-right |
可以看到,border-image-slice的实际作用就是切割,根据设置的值将图片切割为9个部分。
border-image-repeat:
语法:border-image-repeat: [stretch | repeat | round | space]{1,2}
此属性与其它属性不一样,border-iamge-repeat不遵循top,right,bottom,left的方位原则,它只接受一个或者两个参数值,第一个值表示水平方向的排列方式,第二个值表示垂直方向的排列方式,当只有一个值的时候,表示水平方向和垂直方向的排列方式相同,如果不设置任何值,则水平和垂直方向的排列方式默认都是stretch
各个值的含义如下:
strech:将图片拉伸以填充相应区域
repeat:将图片重复来填充相应区域
round:将图片重复来填充相应区域,如果整数个图片无法填充区域,则伸缩图片,使得整数个图片可以正好填充相应区域(这也是其与repeat的区别,repeat不会伸缩图片,所以在边缘有可能出现半个图片)
space:将图片重复来填充相应区域,如果整数个图片无法填充区域,则余下的区域留白
border-image-width:
语法:border-image-width: [ <length> | <percentage> | <number> | auto]{1, 4}
边框图片是被在一个叫做边框图片区域(border image area)的地方被绘制的,这篇区域的边界默认是边框盒(border box), borser-image-width所取的四个值被用来将边框图片区域(border-image-area)切分为9个区域,代表了从top,right,bottom,left四个方向向内的偏移,遵循T/R/B/L原则。
可以参考W3School给的这个样例,可以很直观的看到效果。
border-image-outset:
这个属性取的值表示边框图片区域(border image area)超出边界盒(border box)的大小,四个值同样的遵循T/R/B/L原则。具体效果,可以参考下无school上的这个样例。
浏览器兼容性
样例
这个样例实现按钮圆角阴影效果<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3的border-image制作按钮</title> <style type="text/css"> .border-image-btn { display: inline-block; border: 18px solid green; border-width: 0 18px; border-image: url("button_sprite.png") 0 18 50 18; -webkit-border-image: url("button_sprite.png") 0 18 50 18; -moz-border-image: url("button_sprite.png") 0 18 50 18; -o-border-image: url("button_sprite.png") 0 18 50 18; -ms-border-image: url("button_sprite.png") 0 18 50 18; padding: 13px 10px 17px; font-size: 16px; color: #fff; font-weight: bold; text-decoration:none; line-height: 15px; margin: 10px; } .border-image-btn:hover { border-image: url("button_sprite.png") 50 18 0 18; -webkit-border-image: url("button_sprite.png") 50 18 0 18; -moz-border-image: url("button_sprite.png") 50 18 0 18; -o-border-image: url("button_sprite.png") 50 18 0 18; -ms-border-image: url("button_sprite.png") 50 18 0 18; color: #000; border-color: yellow; text-decoration: none; } </style> </head> <body> <a href="#" class="border-image-btn">Click Me!</a> <a href="#" class="border-image-btn">用力点击我吧!</a> <a href="#" class="border-image-btn">CSS3 Border-image Button</a> </body> </html>
显示效果如下(Chrome):
光标点击的时候效果如下:
相关文章推荐
- ios学习笔记 图片边框处理
- CSS3学习笔记之属性选择器(上)
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- css3学习笔记 属性选择器 enabled、disabled、read-wirte、read-only
- Android工作学习笔记之图片自适应imageview属性android:scaleType
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- 安卓学习笔记---自定义ImageView实现图片圆形 ,椭圆和矩形圆角显示(矩形圆角加边框)
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- 前端面试-----CSS3新增属性之边框图片
- CSS3学习笔记 之 边框颜色
- CSS3学习笔记之属性选择器(下)
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
- 自定义属性之图片切换实例——初始化——JS学习笔记2015-5-28(第41天)
- CSS3学习笔记之边框效果
- 自定义属性之图片切换实例——代码简化、函数合并——JS学习笔记2015-5-30(第43天)
- CSS3边框图片属性---border-image
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- 学习笔记:CSS3的filter属性
- Android工作学习笔记之图片自适应imageview属性android:scaleType
- CSS3动画之animation属性学习笔记