欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

css3之border-image

发布时间：2025/4/14 编程问答 45 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。