Piazza gradienti immagine di sfondo, raggio d'angolo e trasparenza

Question

mi è difficile descrivere l'effetto che voglio con le parole così ho creato in Photoshop e si può vedere l'immagine qui sotto:

come si può vedi Ho un quadrato rosso con un bordo a 38pixel. Il bordo è esterno e il suo stile è impostato per modellare lo scoppio. Ma sfortunatamente non penso che uno stile simile sia nei CSS. Il colore del bordo viene quindi impostato su un gradiente lineare con il colore all'interno che è lo stesso rosso del quadrato e il colore esterno è impostato su bianco trasparente. Non prestare attenzione al verde che è il livello sottostante solo per mostrare la trasparenza del bordo.

Quello che mi piacerebbe sapere, è se c'è QUALSIASI modo per ottenere questo effetto con CSS o jQueryUI forse.

Ho cercato per un po 'in THIS JSFIDDLE, ma non so come renderlo più simile a un quadrato.

Ecco il codice in uso il violino sopra

<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

Come circa il seguito, con un'ombra inset scatola:

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>

Oppure ... per per una frontiera senza verde:

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>