border-radius: 50% für gerundetes Bild in der Konsole durchgestrichen

Question

Ich befolge die Standardverfahren für die Erstellung eines runden Bildes in ReactJS.

.about-profile { 
    display: block; 
    width: 260px; 
    height: 260px; 
    border-radius: 50%; 
} 

<img className="about-profile" src="./images/profile.jpg"/> 

Warum ist border-radius: 50% in diesem Fall nicht angewendet werden?

Answer 1

Das ist die Kaskade in CSS in Kraft. Eine andere Regel überschreibt den Grenzradius.

Weitere Details finden https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Was können Sie tun, ist entweder .about-profile ändern, um mehr „spezifisch“ zu sein, oder verwenden Sie !important die anderen Regeln außer Kraft zu setzen. Ich schlage das erstere vor.

Answer 2

Sie können diese verwenden:

border-radius: 50%!important; 

Answer 3

einige Stil Überschreibung dieser Code so verwenden, um wichtige

.about-profile { 
    display: block; 
    width: 260px; 
    height: 260px; 
    border-radius: 50%; 
}