css3之border-image

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>



哈，开始不明白，现在懂了，FF和谷歌表现不同呢。你也来试试吧。

posted @ 2012-02-07 16:16  jennyQ  阅读(352)  评论(0)  编辑  收藏  举报