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. [代码]--GridControl使用技巧总结,更新中...

    1如何禁用GridControl中单击列弹出右键菜单 设置Run Design->OptionsMenu->EnableColumnMenu 设置为:false 2如何定位到第一条数据/记 ...

  2. 【题解】 bzoj2115: [Wc2011] Xor (线性基+dfs)

    bzoj2115,戳我戳我 Solution: 看得题解(逃,我太菜了,想不出这种做法 那么丢个链接 Attention: 板子别写错了 又写错了这次 \(long long\)是左移63位,多了会溢 ...

  3. 以太坊 链私有链环境搭建(windows)

    摸索以太坊区块链技术几个月了.最近打算逐步的把自己学到的东西和大家分享一下.在阅读本文之前,希望大家能对区块链的概念能有所了解.这样操作过程中的环节理解更深入.下面开始进入准备.因为本次是window ...

  4. Windows 7 安装VS2008 SP1 失败

    由于Windows 7自带了.NET Framework 3.5 SP1, 所以在安装VS 2008 SP1的时候会发生fatal error during installation的错误, 网上找来 ...

  5. 团体程序设计天梯赛-L3-021 神坛 的一些错误做法 和 一些想法

    https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 错误做法: 极角排序 + 最小三角形的两边是 ...

  6. 使用开源Breeze工具部署Kubernetes 1.12.1高可用集群

    Breeze项目是深圳睿云智合所开源的Kubernetes图形化部署工具,大大简化了Kubernetes部署的步骤,其最大亮点在于支持全离线环境的部署,且不需要FQ获取Google的相应资源包,尤其适 ...

  7. python---django中自带分页类使用

    请先看在学习tornado时,写的自定义分页类:思路一致: python---自定义分页类 1.基础使用: 后台数据获取: from django.core.paginator import Pagi ...

  8. SpringMVC关于ajax提交400错误(后台获取为null)

    400错误有三种情况 1:请求的数据量过大,不过这种情况一般很少见. 2:请求的data参数有误,确保每一个参数都能请求到. 注释:之前小白出现400错误,后台获取参数为null是因为第三种情况,经过 ...

  9. CSS-3 文字阴影—text-shadow 的使用

    text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...

  10. 20145234黄斐《Java程序设计》第八周

    教材学习内容总结 第十四章-NIO与NIO2 NIO与IO的区别 NIO Channel继承框架 想要取得Channel的操作对象,可以使用Channels类,它定义了静态方法newChannel() ...