帶圓角的邊框圖像

Question

我有一個使用線性漸變作為邊框圖像的div以為其提供一些漸變邊框

<div class = "gradborders" id="mydiv" runat="server">
..various elements...
</div>
....
....
.gradborders{ 
border-image: -webkit-linear-gradient(45deg, rgba(20,20,20,0.7) 5%,  rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
border-image: -o-linear-gradient(45deg, rgba(20,20,20,0.7) 5%,  rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
border-image: -moz-linear-gradient(45deg, rgba(20,20,20,0.7) 5%,  rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;
border-image: linear-gradient(45deg, rgba(20,20,20,0.7) 5%,  rgba(90,90,90,0.5) 35%, rgba(255,255,255,0.2) 100%) 8 stretch;}

我想把角落弄圓。 我通過將其添加到gradborders中嘗試了標准方法：

border-radius: 8px;
-webkit-border-radius: 8px; 
-moz-border-radius: 8px;

但沒有骰子。 我什至嘗試在div上使用AJAX圓角擴展器，我確定它會起作用，但那也不起作用。 有任何想法嗎？？

Answer 1

也許像這樣的JSFiddle可以做到：

<div class="container">
    <div class="gradborders">hi</div>
</div>

和

.container{border-radius: 10px;overflow:hidden;}
.gradborders{ 
-webkit-border-image: url("http://photos-f.ak.fbcdn.net/hphotos-ak-ash4/1686_520555094669668_1347475803_n.jpg") 8;}