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
.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个参数,比如:

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
.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的效果

测试代码:

1
2
3
4
5
6
7
8
9
.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代码:

 

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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代码:

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(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就说这么多吧。

CSS3中border-image属性详解的更多相关文章

  1. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  2. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  3. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  4. Android中的windowSoftInputMode属性详解

    这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下     在前面的一篇文章中 ...

  5. android中xml tools属性详解

    第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

  6. android中xmlns:tools属性详解

    今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...

  7. android中xml tools属性详解(转)

    第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

  8. css3 vw、vh属性详解,以及与%、rem的区别介绍

    最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw \ vh,遇到一些问题,记录下来 vw.vh是什么? 字面上可以简单理解为,vw (view width),vh(view hei ...

  9. android中布局文件中 layout_weight 的属性详解

    在不同的情况下,layout_weight属性作用是不同的.主要有两种属性: 1.当布局中的控件的尺寸(宽和高)都有指定时,它所表示的该控件在父容器中的比重,及它在父容器中所占的比例,数值越大,比重越 ...

  10. Android中的sharedUserId属性详解

    在Android里面每个app都有一个唯一的linux user ID,则这样权限就被设置成该应用程序的文件只对该用户可见,只对该应用程序自身可见,而我们可以使他们对其他的应用程序可见,这会使我们用到 ...

随机推荐

  1. [代码]--c#获取系统时间

    public DateTime GetServerDataTime() { string sql = " select top 1 getdate() from sysobjects &qu ...

  2. BZOJ5467 PKUWC2018Slay the Spire(动态规划)

    即求所有情况的最大伤害之和.容易发现应该先打强化牌,至少打一张攻击牌.同样显然的是强化牌和攻击牌都应该按从大到小的顺序打.进一步可以发现,只要还有强化牌,就应该使用(当然至少留一次攻击的机会). 于是 ...

  3. Django_博客项目 引入外部js文件内含模板语法无法正确获取值得说明和处理

    问题描述 : 项目中若存在对一段js代码复用多次的时候, 通常将此段代码移动到一个单独的静态文件中在被使用的地方利用 script 标签的 src 属性进行外部调用 但是如果此文件中存在使用 HTML ...

  4. SP8093 JZPGYZ - Sevenk Love Oimaster 解题报告

    SP8093 JZPGYZ - Sevenk Love Oimaster 题目大意 给定\(n(n\le 10000)\)个模板串,以及\(m(m\le 60000)\)个查询串(模板串总长\(\le ...

  5. CF1110C Meaningless Operations(构造题)

    这可能是我打那么多次CF比赛时,做出来的最难的一道题了……而且这题也是个绝世好题…… 题目链接:CF原网  洛谷 题目大意:$q$ 组询问,每次给定 $a$ 询问 $\gcd(a\&b,a\o ...

  6. HTTP 返回的状态码 != 200 ,浏览器不会将返回的内容缓存到本地磁盘上

    今天无意发现的,以前处理HTTP State = 404或403之类的,都是直接返回 HTTP 200 OK,然后加一个缓存设置,例如: Cache-Control: max-age=3600 最近修 ...

  7. C#利用Zxing.net生成条形码和二维码并实现打印的功能

        开篇:zxing.net是.net平台下编解条形码和二维码的工具. 下载地址:http://pan.baidu.com/s/1kTr3Vuf Step1:使用VS2010新建一个窗体程序项目: ...

  8. JS中的继承链

    我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person( ...

  9. Go 语言编程规范

    1. gofmt 命令 大部分的格式问题可以通过 gofmt 来解决,gofmt 自动格式化代码,保证所有的 go 代码与官方推荐的格式保持一致,所有格式有关问题,都以gofmt的结果为准.所以,建议 ...

  10. Spark记录-Scala集合

    Scala列表 Scala列表与数组非常相似,列表的所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,列表的元素不能通过赋值来更改. 其次,列表表示一个链表,而数组是平的. 具有类 ...