方形渐变背景图像,角半径和透明度

Question

我发现很难用文字描述我想要的效果,所以我在Photoshop中创建了它,你可以看到下面的图像:

如你所见,我有一个38像素边框的红色正方形.边界在外面,其风格设置为爆裂形状.但不幸的是,我认为CSS中没有类似的风格.然后将边框颜色设置为线性渐变,其中内部颜色与正方形相同,外部颜色设置为透明白色.不要注意下面的绿色只是为了显示边框的透明度.

我想知道的是,是否有任何方法可以通过CSS或jQueryUI来实现这种效果.

我一直在尝试这个JSFIDDLE,但我不知道如何让它更像一个正方形.

这是上面小提琴中使用的代码

<div class="test"></div>


    .test {
    width: 300px;
    height: 300px;
    border: 3px solid black;
    background-image: -webkit-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-image: -moz-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-image: radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-position: 50% 50%;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: auto auto;
    background-size: auto auto;
}

Answer 1

下面怎么样,使用inset框阴影:

div {
  background: red;
  height: 200px;
  width: 200px;
  -webkit-box-shadow: inset 0 0 40px 20px green;
  box-shadow: inset 0 0 40px 20px green;
}

<div></div>

或者......对于没有绿色的开始边界:

div {
  background: red;
  height: 200px;
  margin: 50px;
  width: 200px;
  -webkit-box-shadow: 0 0 30px 20px #FF0303;
  box-shadow: 0 0 30px 20px #FF0303;
}

<div></div>