带圆角的边框图像 [英] Border-image with rounded corners

问题描述

我有一个div，它使用线性渐变作为边界图像来为其赋予一些渐变边界

I have a div that uses a linear gradient as a border-image to give it some gradient borders

<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中尝试了标准方法:

and I want the corners rounded. I tried the standard way by adding this to gradborders:

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

但没有骰子.我什至尝试在div上使用AJAX圆角扩展器，我确定它会起作用，但那也不起作用.有什么想法吗?

but no dice. I even tried using the AJAX Rounded Corner extender on the div which I was sure would work but that also did not work. Any ideas??

推荐答案

也许类似 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;}

这篇关于带圆角的边框图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！