[英]CSS borders image border for div element
Why does a single image appear in all the four corners? 为什么单个图像出现在所有四个角落? I only want one image to display
我只想要显示一个图像
Does anyone have any suggestions? 有没有人有什么建议?
<html>
<style>
div.one{
border-style: inset;
border-width:50px;
border-image-source:url(border1.png);
}
</style>
<body>
<div class="one">
</div>
</body>
</html>
No, border-image-source is not supported by any browser. 不,任何浏览器都不支持border-image-source。
Use border-image instead: 改为使用border-image:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
In your case: 在你的情况下:
div.one
{
border-style: inset;
border-width:50px;
-webkit-border-image:url(border1.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border1.png) 30 30 round; /* Opera */
border-image:url(border1.png) 30 30 round;
}
Check this fiddle: http://jsfiddle.net/65adr/55/ 检查这个小提琴: http : //jsfiddle.net/65adr/55/
border-image-source
is a new CSS3 property, which is not yet supported by any of the browsers. border-image-source
是一个新的CSS3属性,任何浏览器都不支持它。 Use divs or something else instead to contain images. 使用div或其他代替来包含图像。
Try this it work all browsers: 试试这个适用于所有浏览器:
div.one
{
border-style: inset;
border-width:50px;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.