带有圆 Angular 半径的 div 周围的 CSS3 渐变边框

Question

我正在尝试在每个 Angular 的 Angular 半径为 32px 的 div 周围创建一个 40px 的粗边框，然后渐变向中心逐渐淡出。不确定这是否是解释它的最佳方式，所以我制作了一个 jsFiddle 试图模拟我需要的东西，但它已关闭。

http://jsfiddle.net/c7uYh/

there's too much code to post on here neatly.

编辑 当您查看 jsFiddle 的输出时，您会发现 Angular 与侧面、顶部和底部的渐变不匹配。有一个明显的边缘可见。

我怎样才能让它匹配？

Answer 1

我只是框阴影而不是太多废话来处理....为什么没有选项告诉渐变跟随形状。 >>>(?)<<<<<但是边框渐变有效..

-_-

http://jsfiddle.net/HwCyf/1/

div{
    display:inline-block;

}
#m {
    box-shadow:0 0 60px 35px white;
    width:300px;
    height:200px;
    margin:36px; border-radius:20px; 
    background-color:white;}

#b {
    background-color:rgb(231, 105, 255);
    border-radius:30px; border:1px solid purple;
}