當前位置：
首頁 >
css3之border-image
發布時間：2025/4/14
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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和谷歌表現不同呢。你也來試試吧。
轉載于:https://www.cnblogs.com/jennyQ/archive/2012/02/07/2341604.html
總結
以上是生活随笔為你收集整理的css3之border-image的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于visual c++之windows
- 下一篇： 解决调用HttpContext类