您的位置:首页> 前端教程> CSS3教程
文章导航

CSS border-image

2019-11-16 13:19| 作者: admin| 查看: 3031| 评论: 0|来自: 蚂蚁部落

CSS2设置边框的样式较为简单,比如设置边框的粗细程度,边框颜色和边框类型(实线或者点状等)。

想要实现精美多变的边框效果,是一件非常烧脑的工作,甚至说难以实现。

令人鼓舞的是,border-image属性的出现可以帮助前端人员设置边框的样式更为丰富多样。

一.基础知识:

使用border-style属性可以设置边框的类型,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:200px;
  height: 100px;
  border-style: dotted;
  border-color: red;
  border-width: 1px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面代码设置div的边框类型为dotted,border-style属性值极为有限,难以设置更为绚丽的边框效果。

border-image可以规定图片作为边框样式,由于图片是比较容易做的美观绚丽,于是实现边框美观绚丽成为较为容易的工作;可以认为border-image是border-style变量类型的一种。

特别说明:border-image属性值为none或者图片不可见时,显示border-style属性规定的边框效果。

二.详细说明:

语法结构:

[CSS] 纯文本查看 复制代码
border-image: source slice / width / outset repeat

border-image是复合属性,拆分如下:

[CSS] 纯文本查看 复制代码
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

参数解析:

1.border-image-source:

用于规定是否用图片定义边框样式或者规定图像来源路径。

语法结构:

[CSS] 纯文本查看 复制代码
border-image-source : none | <url>

属性值默认为none,不使用图片定义边框。

用图片定义边框,与background-image属性相仿,用url()规定图片路径,相对/绝对路径都合法。

2.border-image-slice:

用于规定图片的切割位置。

语法结构:

[CSS] 纯文本查看 复制代码
border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

默认值是100%。

number:纯数值,不能够带单位,默认单位是像素(px)。

percentage:相对于图片的尺寸。

number和percentage都可以有1-4个值,取值方式与border-width相仿,遵循上右下左顺序。

下面介绍一下它是如何具体切割图片,先看一个图片:

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/004320gmt00z6uxjah6gh2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

每一个小方块尺寸是27px,那么整个图片的尺寸是81(27*3)像素。

slice翻译成中文是切割、划分的意思,裁切方式是向内进行切割,如果有如下代码:

[CSS] 纯文本查看 复制代码
border-image-slice:27px 27px 27px 27px

第一个27px是从图片上边缘向内27px进行切割。

第二个27px是从图片右边缘向内27px进行切割。

第三个27px是从图片下边缘向内27px进行切割。

第四个27px是从图片左边缘向内27px进行切割。

切割演示图片如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/004709m6zqktz77k8t8x9k.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面以动态方式演示了是如何对图片进行切割。

图片被切割后,划分为九个区域,与元素的九个区域一一对应。

介绍一下元素九个区域,CSS代码如下:

[CSS] 纯文本查看 复制代码
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-width:20px;
  border-color:blue red;
}

上述生成带有边框的div元素,具有潜在的九个区域,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/005015bwbxxxcm1xzwhjmd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

边框图片九个区域与元素九个区域一一对应,也就是边框图片的相应部位就应用于元素的相应位置。

fill关键字如果存在的话,将会保留border-image中间的部分(预设是丢弃中间部分,留空处理)。

3.border-image-width:

用于规定边框图片宽度。

语法结构:

[CSS] 纯文本查看 复制代码
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

边框图片绘制在指定的区域内的,这个区域叫做边框图片区域,border-image-width用来规定此区域的"厚度"。

此属性可以省略,此时边框图片区域与元素的border是一致的。

此属性可以有1-4个值,取值方式和border-width相仿,遵循上右下左方式。

4.border-image-outset:

用于规定边框图片区域超出元素边框的尺寸。

语法结构:

[CSS] 纯文本查看 复制代码
border-image-outset : [ <length> | <number> ]{1,4}

此属性可以有1-4值,取值方式和border-width类似,同时也遵循上右下左方式。

5.border-image-repeat:

用于规定切割后的边框图片中间部分(演示图片中的黄色部分)在元素对应部分的存在方式。

语法结构:

[CSS] 纯文本查看 复制代码
border-image-repeat: [ stretch | repeat | round ]{1,2}

首先解释一下三种方式的含义:

stretch:图片以延展方式来填充该区域。

repeat:图片以重复平铺方式来填充该区域。

round:图片以重复平铺方式来填充该区域。如果没有以整数的倍数来填充该区域,图片会进行缩放以便于整数性倍数的平铺填充。

此属性可以有1-2个属性值:

如果有一个,则用于上下左右四个方位。

如果有两个,第一个用于上下方位,第二个用于左右方位。

如果省略此属性,则默认使用stretch。

三.代码实例:

特别说明:以下代码实例都是以下面图片作为边框图片,尺寸是(27*3)px。

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/005522oz72ztueasyy2yt8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

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

1

鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (2 人)

上一篇:CSS border-colors下一篇:CSS box-shadow

最新评论

返回顶部