CSS3基础CSS3以图片创建元素边框border-image属性

CSS3以图片创建元素边框border-image属性

以图片创建边框,或者说给边框定义一个背景图片,它的CSS3属性是border-image,也许刚开始不容易理解,下面我们先来创建一个普通的带边框的矩形:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
#a1 {background:#39D8B8;
width:300px;height:200px;
border:40px solid #000;
}
</style>
</head>
<body>
<div id="a1">
</div>
</body>
</html>

这个例子大家很熟悉,这是一个矩形,有40px宽度的黑色边框,下面我们定义一个border-image属性,我先准备了一副图片:

bk.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
#a1 {background:#39D8B8;
width:300px;height:200px;
border:40px solid #000;
border-image:url(bk.png) 40 round;
}
</style>
</head>
<body>
<div id="a1">
</div>
</body>
</html>

浏览这个网页,我们发现图片被应用在边框的背景。

以图片创建边框.png

我们看到border-image属性定义了3个值,分别是图片路径,切割宽度和图片展示方式。

图片路径这个值大家都理解,与background-image属性相同,而切割宽度这里定义了一个值,它表示四个方向宽度相同,当然也可以定义四个值分别表示上右下左四个方向。

图片的展示方式有三种,分别是round(平铺),repeat(重复)和stretch(拉伸),这三个词相信大家给Windows桌面设置背景的时候遇到过,应该理解它们的含义。

关于以图片设置边框,图片具体是怎么被分割到边框里的,我们这里就不做赘述,大家可以找一张图片,分别定义background-image不同的值测试一下看看有什么效果吧。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/25.html