Comment faire un cadre rond avec gradient radial avec CSS3?

Question

Je dois créer un cadre rond autour d'un centre transparent. Le cadre a un gradient radial de la bordure intérieure à la bordure extérieure.

Le div rond est facile avec un rayon de bordure de 50%.

Le problème consiste à ajouter un dégradé radial à la bordure. J'ai essayé avec border-image, border-color, box-shadow, radial-gradient sans aucun succès, alors qu'avec background-image je n'ai pas réussi à avoir le centre transparent.

Des suggestions?

Merci, Enrico

Answer 1

Vous pouvez utiliser box-shadow

.radial-thinggy { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 80px; 
 
    background-color: transparent; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 10px 10px rgba(255,69,0,1), 
 
       0 0 20px 20px rgba(255,140,0,1), 
 
       0 0 30px 30px rgba(255,255,0,1); 
 
} 
 

 
body { 
 
    background-color: cornflowerblue; 
 
}

<div class="radial-thinggy"></div>