CSS border-end-end-radius ποιότητα

Ορισμός και χρήση

border-end-end-radius Η ιδιότητα χρησιμοποιείται για να ορίσει τον ακτίνα της γωνίας γωνιάς στο τέλος του στοιχείου μπλοκ (block-end) και στο τέλος της κατεύθυνσης της γραμμής (inline-end).

Σημείωση:σχετικές CSS ιδιότητες writing-mode,text-orientation και direction Ορίζει την κατεύθυνση του μπλοκ και την κατεύθυνση της γραμμής. Επομένως, αυτές οι ιδιότητες επηρεάζουν επίσης border-end-end-radius Το αποτέλεσμα της ιδιότητας. Για τις αγγλικές σελίδες, η κατεύθυνση της γραμμής είναι από αριστερά προς τα δεξιά, η κατεύθυνση του μπλοκ είναι προς τα κάτω.

Εάν border-end-end-radius Η ιδιότητα έχει δύο τιμές, τότε η γωνία γωνιάς θα είναι μια ελλειψοειδής:

border-end-end-radius: 50px 100px;

Εάν border-end-end-radius Η ιδιότητα έχει μια τιμή, τότε η γωνία γωνιάς θα είναι μια σφαίρα:

border-end-end-radius: 50px;

CSS border-end-end-radius ιδιότητες με border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius και border-top-right-radius είναι πολύ παρόμοια αλλά border-end-end-radius Η ιδιότητα εξαρτάται από την κατεύθυνση του τοπικού και της οριζόντιας κατεύθυνσης.

Παράδειγμα

Παράδειγμα 1

Προσθέστε γωνίες καμπυλότητας στην τελική κατεύθυνση του τοπικού και της οριζόντιας κατεύθυνσης για ορισμένα στοιχεία:

#example1 {
  background-color: lightblue;
  border-end-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-end-radius: 50%;
  writing-mode: vertical-rl;
} 

Δοκιμάστε το προσωπικά

Παράδειγμα 2: Συγχώνευση της ιδιότητας direction

Η θέση της γωνίας καμπυλότητας στην τελική κατεύθυνση του τοπικού και της οριζόντιας κατεύθυνσης επηρεάζεται από: direction Περιπτώσεις επιρροής της ιδιότητας:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-end-radius: 25px;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 3: Συγχώνευση της ιδιότητας writing-mode

Η θέση της γωνίας καμπυλότητας στην τελική κατεύθυνση του τοπικού και της οριζόντιας κατεύθυνσης επηρεάζεται από: writing-mode Περιπτώσεις επιρροής της ιδιότητας:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-end-radius: 25px;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

border-end-end-radius: 0|length|initial|inherit;

Τιμή ιδιότητας

Τεχνικά λεπτομέρειες

Υποστήριξη περιηγητών

Τα αριθμητικά στοιχεία της κύριας τάμπυλας υποδεικνύουν την έκδοση του πρώτου περιηγητή που υποστηρίζει αυτήν την ιδιότητα.

Σελίδες συναφείς

Εκμάθηση:CSS γωνίες

Αναφορά:CSS border-bottom-left-radius ποιότητα

Αναφορά:CSS border-bottom-right-radius ποιότητα

Αναφορά:CSS ακτίνα πλάτους κορυφής αριστερού όρίου

Αναφορά:CSS ακτίνα πλάτους κορυφής δεξιού όρίου

Αναφορά:CSS direction ιδιότητα

Αναφορά:CSS text-orientation ιδιότητα

Αναφορά:CSS writing-mode ιδιότητα