Html 仅将边框图像用于底部边框？我们的 CSS 似乎在整个 div 中复制图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10164393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead
提问by Crashalot
We would like to use an image only for the bottom of a DIV. However, our CSS somehow replicates the image across the body of the DIV instead of placing it at the bottom.
我们只想在 DIV 的底部使用图像。然而，我们的 CSS 以某种方式在 DIV 的主体上复制了图像，而不是将其放置在底部。
What are we doing wrong?
我们做错了什么？
We only need to support mobile Safari.
我们只需要支持移动Safari。
Example: http://jsfiddle.net/ZwnF8/
示例：http: //jsfiddle.net/ZwnF8/
Code:
代码：
<div></div>?
div { background:gray;
width:100px;
height:100px;
margin-left:20px;
-webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png) 0 0 8 0 round
}?
回答by T.Todua
Method 1:set 0width to all (except border-bottom):
方法一：将0宽度设置为全部（除了border-bottom）：
border-image:url("http://lorempixel.com/g/400/100/?example.jpg");
border-top:0;
border-left:0;
border-right:0;
// btw, you can use "one-line" command> border-width: 0 0 3px 0;
Method 2:with style.css, create ::AFTERphseudo-element:
方法二：使用style.css，创建 ::AFTER伪元素：
.yourDiv::after {
content:"";
height:20px;
width:100%; /* or i.e: 500px */
background:url("http://lorempixel.com/g/400/100/?example.jpg");
}
回答by gabitzish
Try with -webkit-border-bottom-image . Don't forget to include non-webkit browsers. Here is an useful link : http://css-tricks.com/understanding-border-image/
尝试使用 -webkit-border-bottom-image 。不要忘记包含非 webkit 浏览器。这是一个有用的链接：http: //css-tricks.com/understanding-border-image/
回答by Durthar
You've defined it to repeat as "round": http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp
您已将其定义为重复为“圆形”：http: //www.w3schools.com/cssref/css3_pr_border-image-repeat.asp
Here's how you can define each individual attribute:
以下是定义每个单独属性的方法：
div { background:gray;
width:100px;
height:100px;
margin-left:20px;
-webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png);
-webkit-border-image-width: 0 0 8px 0;
-webkit-border-image-repeat: stretch;
border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
border-image-width: 0 0 8px 0;
border-image-repeat: stretch;
}回答by gNerb
I don't know about safari mobile but I killed the border part of your css on the fiddle and put this below your div:
我不知道 safari mobile，但我在小提琴上杀死了你的 css 的边框部分，并将它放在你的 div 下方：
<div></div><img src="http://www.panabee.com/images/dumpling/footer_list.png" style="height:20px;width:100px;margin-left:20px;"/>
And it did what it seems like you want it to. Does safari mobile not support something like this?
它做了你想要的。safari mobile 不支持这样的东西吗？
回答by yoga
this is used to put the border image in the bottom of the div
这用于将边框图像放在 div 的底部
<html>
<head>
<style>
.target{
height:100px;
width:100px;
border-image: url(Images/line.png) 0 0 5 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom:8px;
}
</style>
</head>
<body>
<div class="target">
</div>
</body>
</html>
回答by missCEREN
look at this jsfiddle.net/ocewa9sm/
#borderimg {
background: #dfdfdf;
padding: 15px;
position: relative;}
#borderimg:after {
content: "";
border-bottom: 16px solid transparent;
width: 100%;
position: absolute;
left: 0;
bottom: -16px;
-webkit-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
-o-border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
border-image: url(http://www.panabee.com/images/dumpling/footer_list.png) ;
border-image-slice: 8;
border-image-width: 8px;
border-image-outset: 0;
border-image-repeat: stretch;
}
