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

Question

我正在尝试创建一个厚边框，40px，围绕每个角上角半径为32px的div，然后渐变向中心渐变。不确定这是否是解释它的最好方法，所以我做了一个试图模仿我需要的jsFiddle，但它已经关闭了。

http://jsfiddle.net/c7uYh/

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

编辑当您查看jsFiddle的输出时，您会看到角落与边，顶部和底部的渐变不匹配。有明显的边缘可见。

我怎样才能让它匹配？

Answer 1

我只是用阴影而不是废话来处理...... 为什么不会有选项告诉渐变跟随形状。 ＆GT;＆GT;＆GT;＆LT（？）;＆LT;＆LT;＆LT;＆LT; 然而边界渐变起作用..

- _ -

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;
}