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

Question

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

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

我想知道的是，是否有任何方法可以通过CSS或jQueryUI实现此效果。

我在THIS 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框阴影：

，如下所示

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

或者......对于没有绿色的开始边框：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;