CSS3中border-image属性详解
来源:互联网 发布:web后端性能优化 编辑:程序博客网 时间:2024/06/05 06:43
原文:http://beyondweb.cn/article_detail.php?id=63
border-images可以说也是CSS3中的重量级属性,如同圆角属性border-radius、边框颜色属性border-color、块阴影属性box-shadow一样,也是属于边框属性中的一员。
从其字面意思上看,我们可以理解为“边框-图片”,通俗的说也就是使用图片作为(对象的)边框,这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了,下面我们就来具体看一下应该怎样使用它。
首先我们来看一下与border-image相关的一些属性,有border-image-source、border-image-slice、border-image-repeat,其实就如同background属性一样有background-color、background-image、background-repeat等与它相关。以前background属性可以分别设置颜色、背景、背景位置...,也可以把这些样式写在一块;当然在这里Border Image的样式可以分别设置也可以写在一块(具体怎么写,在后边会有介绍)。
首先,我们来看一下border-image-souce属性,它就像background-image一样,也采用url()作为它的值,语法:
[border-image-source:url();]
对于border-image-slice属性,其实就是对图片的切割,那么现在我们引入一张图片
图片命名为:borderimage.png
border-image-slice可以取1-4个值,它就像border-width一样,它的几个值遵循上、右、下、左(top、right、bottom、left)的原则,但这几个值是不能带单位的,可以取数字或百分比,当取数字时默认单位为像素(px)。刚才我们提到了切割,那么它是怎么切割的呢?假如取四个值10 15 30 20,那么切割图如下:
加个边框
看,像不像9宫格呢?其实border-image-slice就是把边框图片分为了9个部分,假如改属性取一个值30,那么就把边框图片分成了9等份。
那么现在用代码实现一下试试效果:
.div1{ width:200px; height:100px; -moz-border-image:url(borderimage.png) 30; -webkit-border-image:url(borderimage.png) 30; -o-border-image:url(borderimage.png) 30; border-image:url(borderimage.png) 30; border-width:30px;}
效果:
再看一下这个图
其实1、3、7、9部分好像没有发生大的变化,它们仍然分布在四个角上,而2、4、6、8部分却发生了变化,它们看起来是被拉伸了。
其实我们可以这样理解,根据上图与前面效果图的对比,四个角是没有任何展示效果的,不会平铺也不会拉伸,因此我们可以把它们称作盲区。而border-top-image,border-right-image,border-bottom-image,border-left-image这几个部分才是要展示的,向前面的效果图一样,被拉伸了。对与这种现象,它是由border-image-repeat属性决定的,那么下面我们就看看它有哪些参数。
border-image-repeat属性共有3个值:stretch(拉伸)、repeat(重复)、round(平铺),其中stretch是默认值。在使用时可以取1到2个参数,比如:
border-image:url(borderimage.png) 30;
就等同于
border-image:url(borderimage.png) 30 stretch stretch;
表示水平方向和垂直方向均使用stretch参数,即水平方向和垂直方向都拉伸。
如果是:
border-image:url(borderimage.png) 30 round repeat;
则边框图片在水平方向上平铺,在垂直方向上重复。
对于stretch(拉伸)在前面有个例子,这里就不在多说了,下面我们就详细的区分一下round和repeat。
round的效果
测试代码:
.div1{ width:200px; height:100px; -moz-border-image:url(borderimage.png) 30 round; -webkit-border-image:url(borderimage.png) 30 round; -o-border-image:url(borderimage.png) 30 round; border-image:url(borderimage.png) 30 round; border-width:30px;}
显示效果:
我们可以看到浅色的菱形在水平方向和垂直方向上都平铺了,但它们始终是完整的菱形,就从宽度上来说吧,div的宽是200px,而每个菱形宽度为30px,通过计算200px的宽度大约只能放置6.7个菱形,但我们从图中看到,菱形都是完整的,这就说明菱形肯定变形了,再结合效果图,可以看到四个角的菱形没有变化,而浅色的菱形都变形了。由此我们可以得出结论:round平铺可能会改变边框背景图片大小来适应边框宽度排列。而repeat就不一样了,repeat重复是不改变背景图片大小而直接从中间向两端排列,下面就来验证一下。
repeat的效果
测试代码:
.div1{ width:200px; height:100px; -moz-border-image:url(borderimage.png) 30 repeat; -webkit-border-image:url(borderimage.png) 30 repeat; -o-border-image:url(borderimage.png) 30 repeat; border-image:url(borderimage.png) 30 repeat; border-width:30px;}
显示效果:
可以看到,有些菱形已经不完整了,因此repeat重复确实是不改变背景图片大小而直接从中间开始向两端排列,直到把空间占满为止。
注意:round效果和repeat效果在webkit内核下,如chrome浏览器里并区分不出来,效果是一样的。但在Opera 12.14里可以准确区分这两个参数。
下面我们就来两个DEMO练习一下吧
demo1:按钮制作
按钮图片
button.png
button-hover.png
html代码:
<a href="http://beyondweb.cn/" target="_blank" class="btn01">BeyondWeb</a><a href="http://beyondweb.cn/" target="_blank" class="btn02">BeyondWeb前端开发</a>
CSS代码:
.btn01,.btn02{ text-align:center; font-family:Arial; font-size:20px; color:#fff; text-decoration:none; -moz-border-image:url(button.png) 0 15 0 15 round; -webkit-border-image:url(button.png) 0 15 0 15 round; -o-border-image:url(button.png) 0 15 0 15 round; border-image:url(button.png) 0 15 0 15 round; border-width:0 15px; padding:10px;}.btn01:hover,.btn02:hover{ color:#666; -moz-border-image:url(button-hover.png) 0 15 0 15 round; -webkit-border-image:url(button-hover.png) 0 15 0 15 round; -o-border-image:url(button-hover.png) 0 15 0 15 round; border-image:url(button-hover.png) 0 15 0 15 round;}
效果图如下:
鼠标划过第二个按钮时:
demo2:给照片加边框
这里有一张妹子的照片,还有一个小相框
girl.jpg
borderimage2.png
那么下面我们就给妹子加个相框:
HTML代码:
<div class="img-girl-box"> <img src="girl.jpg" class="img-girl"/></div>
CSS代码:
.img-girl-box{ width:108px; height:81px; -moz-border-image:url(borderimage2.png) 69 124 69 124 round; -webkit-border-image:url(borderimage2.png) 69 124 69 124 round; -o-border-image:url(borderimage2.png) 69 124 69 124 round; border-image:url(borderimage2.png) 69 124 69 124 round; border-width:69px 124px;}.img-girl{ position:absolute; margin-top:-69px; margin-left:-124px; width:356px; height:219px; border:0; z-index:-1;}
显示效果:
好了,关于这个border-image就说这么多吧。
除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:WEB前端开发
- CSS3中border-image属性详解
- CSS3 border-image 属性
- CSS3 border-image属性
- CSS3 border-image属性
- CSS3 border-image详解
- CSS3教程:border-image属性
- CSS3教程:border-image属性
- CSS3之border-image属性
- CSS3教程:border-image属性
- CSS3属性之border-image
- CSS3中border-image属性的最简单的使用方法
- html5学习-CSS3-border-image属性
- CSS3的新增属性border-image
- CSS3实例教程:border-image属性实例讲解
- css3属性border-radius详解
- CSS中边框border属性、border-raduis圆角与border-image详解
- css3:border-image边框图像详解
- css3:border-image边框图像详解
- 监测变量事件
- 拼组PROC
- [android开发之内容更新类APP]四、项目的基本功能之布局(续)
- VC动态库调用方法
- jq锚点动作加返回顶部
- CSS3中border-image属性详解
- window下,使用Apache + Tomcat +mod_jk 搭建集群
- 双击空白添加行
- JS课程
- KingBase学习NO.1(安装)
- 常用windows命令
- 函数指针
- TFS 2012使用简介
- nodejs>>fs