为边框应用图片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属性之后，边框图片就不会再适应边框宽度了。

Weiter lernen

neue Datei

<!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>

einreichen Code zurücksetzen

Automatische Operation

为边框应用图片border-image

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]