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,则这样权限就被设置成该应用程序的文件只对该用户可见,只对该应用程序自身可见,而我们可以使他们对其他的应用程序可见,这会使我们用到 ...
随机推荐
- [代码]--c#获取系统时间
public DateTime GetServerDataTime() { string sql = " select top 1 getdate() from sysobjects &qu ...
- BZOJ5467 PKUWC2018Slay the Spire(动态规划)
即求所有情况的最大伤害之和.容易发现应该先打强化牌,至少打一张攻击牌.同样显然的是强化牌和攻击牌都应该按从大到小的顺序打.进一步可以发现,只要还有强化牌,就应该使用(当然至少留一次攻击的机会). 于是 ...
- Django_博客项目 引入外部js文件内含模板语法无法正确获取值得说明和处理
问题描述 : 项目中若存在对一段js代码复用多次的时候, 通常将此段代码移动到一个单独的静态文件中在被使用的地方利用 script 标签的 src 属性进行外部调用 但是如果此文件中存在使用 HTML ...
- SP8093 JZPGYZ - Sevenk Love Oimaster 解题报告
SP8093 JZPGYZ - Sevenk Love Oimaster 题目大意 给定\(n(n\le 10000)\)个模板串,以及\(m(m\le 60000)\)个查询串(模板串总长\(\le ...
- CF1110C Meaningless Operations(构造题)
这可能是我打那么多次CF比赛时,做出来的最难的一道题了……而且这题也是个绝世好题…… 题目链接:CF原网 洛谷 题目大意:$q$ 组询问,每次给定 $a$ 询问 $\gcd(a\&b,a\o ...
- HTTP 返回的状态码 != 200 ,浏览器不会将返回的内容缓存到本地磁盘上
今天无意发现的,以前处理HTTP State = 404或403之类的,都是直接返回 HTTP 200 OK,然后加一个缓存设置,例如: Cache-Control: max-age=3600 最近修 ...
- C#利用Zxing.net生成条形码和二维码并实现打印的功能
开篇:zxing.net是.net平台下编解条形码和二维码的工具. 下载地址:http://pan.baidu.com/s/1kTr3Vuf Step1:使用VS2010新建一个窗体程序项目: ...
- JS中的继承链
我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person( ...
- Go 语言编程规范
1. gofmt 命令 大部分的格式问题可以通过 gofmt 来解决,gofmt 自动格式化代码,保证所有的 go 代码与官方推荐的格式保持一致,所有格式有关问题,都以gofmt的结果为准.所以,建议 ...
- Spark记录-Scala集合
Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...