为边框应用图片border-image

CSS3的border-image属性用法详解:
在CSS3之前,设置边框的样式是非常的单调的,也就是设置一下边框的类型、颜色或者粗细,纵然精雕细刻,总归提升空间有限,不过border-image属性的出现可以让元素的边框样式更加丰富多彩,
一.基本概念:
border-image属性可以用图片作为边框样式。
使用border-style属性可以设置边框的类型,我们可以认为border-image是边框类型的一种。
当border-image为none或者图片不可见时,将会显示border-style定义的边框效果,否则显示border-image定义的图片边框效果。
此属性可以认为是以下属性的简略写法:

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

语法结构:

border-image: source slice / width / outset repeat

上面是复合属性简略写法形式,后面会对各个属性进行详细说明。
二.参数解析:
1.border-image-source:
该属性用于指定是否用图片定义边框样式或图像来源路径。
语法结构:

border-image-source : none | <url>

此属性默认值为none,也就是不使用图片定义边框。
如果使用图片定义边框,那么和background-image类似,也是用url()方式规定图片的路径,可以使相对也可以是绝对路径。
2.border-image-slice:
此属性用来规定图片的切割位置。
语法结构:

border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

此属性默认值是100%。
如果是number方式,则是纯数值,不能够带单位,不过专指像素(px)。
如果是percentage方式,则是相对于图片的尺寸。
number和percentage都可以有1-4个值,取值方式和border-width类似,同时也遵循上右下左方式。
上面介绍了border-image-slice属性的取值方式,下面介绍一下它是如何具体切割图片,先看一个图片:
QQ截图20161014142914.png 
上图就是我们要用作图片边框的图片,每一个小方块的尺寸是27px,那么此图片的长宽尺寸是(27*3)像素。
slice是对图片进行切割划分,裁切方式是向内进行切割,如果有如下代码:

border-image-slice:27px 27px 27px 27px

第一个27px是从图片上边缘向内27px进行切割。
第二个27px是从图片右边缘向内27px进行切割。
第三个27px是从图片下边缘向内27px进行切割。
第四个27px是从图片左边缘向内27px进行切割。
切割演示图片如下:
 QQ截图20161014142922.png

上面介绍了如何去切割图片,下面介绍一下如何使用切割后的图片。
图片被切割后,会被划分为九个区域,这个九个区域会与元素的九个区域是一一对应的,下面介绍一下元素的九个区域:
css代码如下:

div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-width:20px;
  border-color:blue red;
}

以上代码可以形成一个带有边框的div元素,其实这个元素也具有潜在的九个区域,图示如下:

QQ截图20161014142929.png 
那么边框图片的九个区域和元素的九个区域一一对应起来,也就是边框图片的相应部位就应用于元素的相应位置。
fill关键字如果存在的话,将会保留border-image中间的部分(预设是丢弃中间部分,留空处理)。
3.border-image-width:
此属性用来规定边框图片宽度。
语法结构:

border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

边框图片绘制在指定的区域内的,这个区域叫做边框图片区域,border-image-width属性就是用来规定此区域的"厚度"。
此属性可以省略,此时边框图片区域与元素的border是一致的。
此属性可以有1-4值,取值方式和border-width类似,同时也遵循上右下左方式。
4.border-image-outset:
此属性用来规定边框图片区域超出元素边框的尺寸。
语法结构:

border-image-outset : [ <length> | <number> ]{1,4}

此属性可以有1-4值,取值方式和border-width类似,同时也遵循上右下左方式。
5.border-image-repeat:
此属性用来规定,切割后的边框图片中间部分(演示图片中的黄色部分)在元素对应部分的存在方式。
语法结构:

border-image-repeat: [ stretch | repeat | round ]{1,2}

首先解释一下三种方式的含义:
stretch:图片以延展方式来填充该区域。
repeat:图片以重复平铺方式来填充该区域。
round:图片以重复平铺方式来填充该区域。如果没有以整数的倍数来填充该区域,图片会进行缩放以便于整数性倍数的平铺填充。

此属性可以有1-2个属性值:
如果有一个,则用于上下左右四个方位。
如果有两个,第一个用于上下方位,第二个用于左右方位。
如果省略此属性,则默认使用stretch。
三.代码实例:
特别说明:以下代码实例都是以下面图片作为边框图片,尺寸是(27*3)px。
 QQ截图20161014142936.png

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

    QQ截图20161014142946.png

以上代码中,border-image-slice设置为27,由于没有规定border-image-width,那么将以边框的尺寸为标准,又由于没有规定border-image-repeat属性,则默认采用stretch方式,也就是拉伸被切割的中间区域(也即是演示图中的黄色区域)。
实例二:   

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:54px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

QQ截图20161014142955.png

此实例和实例一的唯一不同之处在于边框的宽度,边框图片会自适应边框的宽度尺寸。
实例三:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/"/>
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 stretch repeat;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

QQ截图20161014143003.png

在以上代码中,水平方位用stretch拉伸方式,垂直方位用repeat重复平铺方式,repeat方式不会调整切割后边框图片中间部分(演示图黄色部分)尺寸方式实现重复平铺效果,所以会出现残缺现象。
实例四:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 repeat round;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

QQ截图20161014143011.png

round方式可以自动调整切割后边框图片中间部分(演示图黄色部分)尺寸方式实现重复平铺效果,所以不会出现残缺现象。
实例五:   

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

QQ截图20161014143019.png

以上代码修改了边框的尺寸,可以看出边框图片会跟着边框尺寸进行自适应。
实例六:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("bimg.jpg") 27/27px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

QQ截图20161014143027.png

当规定了border-image-width属性之后,边框图片就不会再适应边框宽度了。

继续学习
||
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框图片</title> <style> #border_image { margin:0 auto; height:100px; line-height:100px; text-align:center; font-size:30px; width:250px; border:15px solid #ccc; border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 15 repeat; } </style> </head> <body> <div id="border_image"> 请为我镶嵌美丽的边框 </div> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

CSS3从入门到精通教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

汪汪

border-image属性可以用图片作为边框样式。 使用border-style属性可以设置边框的类型,我们可以认为border-image是边框类型的一种。

7年前    添加回复 1

面对疾风吧

下拉框不是select么

7年前    添加回复 0

我又来了

各式各样的,内容很丰富啊

7年前    添加回复 0

大神,求带!

做个九宫格?

7年前    添加回复 0

男神

border-image属性可以用图片作为边框样式。 使用border-style属性可以设置边框的类型,我们可以认为border-image是边框类型的一种。

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~