css3之border-image

最新推荐文章于 2025-06-06 23:18:57 发布

weixin_34197488

最新推荐文章于 2025-06-06 23:18:57 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jennyQ/archive/2012/02/07/2341604.html

本文介绍了如何使用CSS的border-image属性来实现边框背景图片效果，并提供了三种不同的重复方式：拉伸(stretch)、平铺(repeat)及按比例填充(round)。通过具体的HTML和CSS代码示例，展示了如何设置border-image-source、border-image-slice、border-image-width及border-image-repeat等属性。

border-image_CSS

用图片来做边框
border-image:url(skin/border.png) 27/27px stretch;

用图片来做边框
border-image:url(skin/border.png) 27/27px round;

用图片来做边框
border-image:url(skin/border.png) 27/27px repeat;

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>border-image_CSS</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
.test{
    padding:10px;
    -moz-border-image:url(img/border.png) 27/27px stretch;
    -webkit-border-image:url(img/border.png) 27/27px stretch;
    border-image:url(img/border.png) 27/27px stretch;
    margin-bottom:20px
}
.test1{
    padding:10px;
    -moz-border-image:url(img/border.png) 27/27px round;
    -webkit-border-image:url(img/border.png) 27/27px round;
    border-image:url(img/border.png) 27/27px round;
    margin-bottom:20px
}
.test1{
    padding:10px;
    -moz-border-image:url(img/border.png) 27/27px repeat;
    -webkit-border-image:url(img/border.png) 27/27px repeat;
    border-image:url(img/border.png) 27/27px repeat;
    margin-bottom:20px
}
</style>
</head>
<body>
border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

<div class="test">用图片来做边框<br />border-image:url(skin/border.png) 27/27px stretch;</div>
<div class="test1">用图片来做边框<br />border-image:url(skin/border.png) 27/27px round;</div>
<div class="test1">用图片来做边框<br />border-image:url(skin/border.png) 27/27px repeat;</div>
</body>
</html>