Web速查-索引

border-image

定义

border-image属性使用图片作为对象的边界。

注意:当table设置border-collapse为collapse无效。

语法

border-image:border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat;

属性值

说明
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
/* Old Firefox */
-moz-border-image:url(../img/logo.png) 30 30 round;
/* Safari and Chrome */
-webkit-border-image:url(../img/logo.png) 30 30 round;
/* Opera */
-o-border-image:url(../img/logo.png) 30 30 round;
border-image:url(../img/logo.png) 30 30 round;
}
#stretch
{
/* Old Firefox */
-moz-border-image:url(../img/logo.png) 30 30 stretch;
/* Safari and Chrome */
-webkit-border-image:url(../img/logo.png) 30 30 stretch;
/* Opera */
-o-border-image:url(../img/logo.png) 30 30 stretch;
border-image:url(../img/logo.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里,图片铺满整个边框。</div>
<br>
<div id="stretch">在这里,图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片:</p>
<img src="../img/logo.png">
<p><b>注释:</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>
在这里,图片铺满整个边框。

在这里,图片被拉伸以填充该区域。

这是我们使用的图片:

注释: Internet Explorer 不支持 border-image 属性。

border-image 属性规定了用作边框的图片。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
6.0 3.0 4.0 9.0