CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角、边框颜色属性border-color、块阴影属性一样,也是属于边框属性中的一员。
从其字面意思上看,我们可以理解为“边框-图片”,通俗的说也就是使用图片作为(对象的)边框,这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了,下面我们就来具体看一下应该怎样使用它。
首先我们来看一下与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等份。
那么现在用代码实现一下试试效果:
1
2
3
4
5
6
7
8
9
|
.div 1 { 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个参数,比如:
1
|
border-image: url (borderimage.png) 30 ; |
就等同于
1
|
border-image: url (borderimage.png) 30 stretch stretch; |
表示水平方向和垂直方向均使用stretch参数,即水平方向和垂直方向都拉伸。
如果是:
1
|
border-image: url (borderimage.png) 30 round repeat ; |
则边框图片在水平方向上平铺,在垂直方向上重复。
对于stretch(拉伸)在前面有个例子,这里就不在多说了,下面我们就详细的区分一下round和repeat。
round的效果
测试代码:
1
2
3
4
5
6
7
8
9
|
.div 1 { 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的效果
测试代码:
1
2
3
4
5
6
7
8
9
|
.div 1 { 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代码:
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.btn 01 ,.btn 02 { 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 ; } .btn 01: hover,.btn 02: 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代码:
1
2
3
|
< div class = "img-girl-box" > < img src = "girl.jpg" class = "img-girl" /> </ div > |
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.img-girl-box{ width : 108px ; height : 81px ; -moz-border-image: url (borderimage 2 .png) 69 124 69 124 round; -webkit-border-image: url (borderimage 2 .png) 69 124 69 124 round; -o-border-image: url (borderimage 2 .png) 69 124 69 124 round; border-image: url (borderimage 2 .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就说这么多吧。
CSS3中border-image属性详解的更多相关文章
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- Android中的windowSoftInputMode属性详解
这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下 在前面的一篇文章中 ...
- android中xml tools属性详解
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- android中xmlns:tools属性详解
今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...
- android中xml tools属性详解(转)
第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...
- css3 vw、vh属性详解,以及与%、rem的区别介绍
最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw \ vh,遇到一些问题,记录下来 vw.vh是什么? 字面上可以简单理解为,vw (view width),vh(view hei ...
- android中布局文件中 layout_weight 的属性详解
在不同的情况下,layout_weight属性作用是不同的.主要有两种属性: 1.当布局中的控件的尺寸(宽和高)都有指定时,它所表示的该控件在父容器中的比重,及它在父容器中所占的比例,数值越大,比重越 ...
- Android中的sharedUserId属性详解
在Android里面每个app都有一个唯一的linux user ID,则这样权限就被设置成该应用程序的文件只对该用户可见,只对该应用程序自身可见,而我们可以使他们对其他的应用程序可见,这会使我们用到 ...
随机推荐
- 如何把EntityList转换成DataSet
public static DataSet ToDataSet<TSource>(this IList<TSource> list) { Type elementType = ...
- 【刷题】BZOJ 2151 种树
Description A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每个位置都有一个美观度 ...
- spring data jpa createNativeQuery 错误 Unknown entity
springdatajpa本地查询的时候,报错:org.hibernate.MappingException: Unknown entity: com.hzxc.guesssong.model.Que ...
- 【LOJ#10064】黑暗城堡
题目大意:定义一个无向图的最短路径生成树如下:在该无向图的生成树中,任意一个节点到根节点的距离均等于根节点到该节点的最短路.求有多少种最短路径生成树. 题解:首先跑一遍 dij 求出从根节点到每个节点 ...
- pi的求法 acos(-1.0)
pi=acos(-1.0) https://www.luogu.org/problemnew/show/T4529 #include <cstdio> #include <cstdl ...
- arcgis计算邻接矩阵
求邻接矩阵 教程链接 http://m.blog.csdn.net/wan_yanyan528/article/details/49175673 (1) 将目标shp文件导出一份副本备用(以省级为 ...
- python deamon(守护)线程的作用
stackoverflow 上的解释 某些线程执行后台任务,例如发送keepalive数据包,或执行定期垃圾收集,或任何.这些仅在主程序运行时有用,并且一旦其他非守护程序线程退出就可以将其关闭. 没有 ...
- python常用模块-配置文档模块(configparser)
python常用模块-配置文档模块(configparser) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. ConfigParser模块用于生成和修改常见配置文档,当前模块的名称 ...
- Oracle笔记 - unfinished
1. plsql查看xmltype字段的xml格式时,出现中文乱码问题,可通过该字段.getClobVal():查询到的xml将是中文不乱码的. 2. extract函数查询xml某节点下的所有节点, ...
- numpy中的arg系列函数
numpy中的arg系列函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 不定期更新,现学现卖 numpy中arg系列函数被经常使用,通常先进行排序然后返回原数组特定的索引. argmax ...