Merkwürdiges Verhalten von Rand-Radius

Question

Ich lernte, dass wir mit dieser Syntax auch elliptischen Rand-Radius machen können.

Zuerst versuchte ich , die funktionierte.

Dann habe ich versucht border-radius: 20px/10px 10px/10px, Es hat nicht funktioniert, Chrome Developer Tool hob es als falsch hervor.

Verwirrt und frustriert ging ich zu MDN und kehrte verwirrt zurück.

Es zeigt so etwas border-radius: 10px 5%/20px 25em 30px 35em, Ist es nicht komisch? während sie in Kommentaren erwähnt, dass Werte zu /* (first radius values)/top-left | top-right | bottom-right | bottom-left */ gehört, aber was ist first radius values.

Mehr Ich sah es, mehr verwirrend scheint es. Ich weiß, dass ich etwas vermisse, aber weiß nicht was!

Answer 1

Sehen Sie es in voller Höhe, Sie haben:

border-radius: TLH TRH BRH BLH/TLV TRV BRV BLV; 

Wo
T/B sind oben/unten,
L/R Links/Rechts und
H/V sind horizontal/Vertikal

Wenn Sie nicht die "/ vertikale Größe" haben, kopieren sie standardmäßig die horizontalen Größen (also runde Ecken). Wenn Sie nicht über 4 Größen verfügen, werden die angegebenen Werte wiederholt.

Sobald Sie die grundlegende Struktur haben, können Sie mit Werten experimentieren und sehen, was passiert. Dies ist eine gute Möglichkeit zu lernen, was die Dinge tun :)