2

我想设置与 w3school 示例中相同的边框图像样式：http ://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image 。

但是当我在我的桌面上尝试时，https://jsfiddle.net/tangjeen/6yLtmb98/边框图像的结果是不一样的。如果你能帮助我将不胜感激。谢谢你。

<div class="row" id="round">
   <p>sdfsfsdf</p>
</div>

#round{
   -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
   -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
   border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; 
   background-color: lightyellow;
}
4

3 回答 3

6

确保border-width: 15px;/*your value*/和border-style: solid; /*needed for Firefox*/已设置。

或者速记方式border: 15px solid transparent;。还需要确保在border-image规则之前设置它。

#round {
    border-width: 15px;
    border-style: solid;
    border-image: url("https://i.imgur.com/BzbWBYA.png") 30 30 round; 
    background-color: lightyellow;
}
<div id="round">
    <p>hello world!</p>
</div>

于 2015-04-01T22:36:58.220 回答
2

要解决此问题，您还可以调整border-image-width并将 a 添加padding到您的块中：

#round{ 
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; 
    border-image-width: 15px;
    padding: 5px 0px 5px 15px;
    background-color: lightyellow;
}
于 2015-04-01T22:13:04.143 回答
-1

我会用这个：

#round img{
border: imgpath;
}

编辑

顺便说一句，你的代码工作......看：http: //jsfiddle.net/5Lyw6qek/

于 2015-04-01T22:05:41.620 回答