【CSS3】为边框应用图片 border-image

最新推荐文章于 2024-05-10 15:23:16 发布

badlyForPapers

最新推荐文章于 2024-05-10 15:23:16 发布

阅读量810

点赞数

本文链接：https://blog.csdn.net/happyhaojie/article/details/50617579

版权

写在前面：在我刚开始学css3的时候，查阅了所有有关 border-image的文档，我都没有明白是怎么回事，因为我疑惑的地方这些文档都没有讲解或者没有讲解清楚，直到有一天我遇到Ta，才彻底明白了这个属性。

border-image这个复合属性包含五个属性：border-image-source（图片来源）,border-image-slice（分割方法）,border-image-width（边框宽度）,border-image-outset（扩展方式）,border-image-repeat（重复方式）。

（1）如果没有border-image这个属性，传统方法该如何设置边框呢？

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat red ;
       }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

运行结果：

图1-1

如果不居中（没有center）的话，效果是：

图1-2

原图：

图1-3

注：图1-1红色部分相当于边框（因为原图的大小是280*280，现在div的大小是300*300，多出来的部分就相当于边框）。加上“background-image-source:none”效果一样。

（2）border-image-repeat：stretch（默认值）

需要达到的目标效果如图2-0：

图2-0

图2-1

图2-1是边框图片，大小为81*81。

程序：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			div{
				width:300px;
				height:300px;
				background:url(./shuaige.jpg) center no-repeat ;
				border-image-source:url(./border.png);/*边框图片属性*/
				border-image-width:27px;/*边框图片宽度属性*/
				border-image-slice:27;/*边框图片切割属性*/
				border-image-outset:0px;/*边框图片扩展属性*/
				border-image-repeat:stretch;/*边框图片重复属性*/
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

运行结果：

图2-2

这里需要说明的问题有很多。

说明1：首先，border-image-slice:27将图片分割成9份，如图2-3所示，（border-image-slice的用法非常简单，切四刀，分别距离边缘27px），然后对应图2-4，把图2-4中的1部分填充到图2-3的1部分，2部分对应到2部分，以此类推，不过5部分不会填充，它是内容，即图片，最终得到图2-2。