CSS border-end-start-radius ιδιότητα

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

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

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

Αν border-end-start-radius Αν μια ιδιότητα έχει δύο τιμές, η γωνία γωνιαίας καμπύλης θα είναι ελλειψοειδής:

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

Αν border-end-start-radius Αν μια ιδιότητα έχει μια τιμή, η γωνία γωνιαίας καμπύλης θα είναι γυροί:

border-end-start-radius: 50px;

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

Παράδειγμα

Παράδειγμα 1

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

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

Προσπαθήστε το個人

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

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

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

Προσπαθήστε το個人

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

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

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

Προσπαθήστε το個人

Γλώσσα CSS

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

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

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

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

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

Σελίδες σχετικές

Εκμάθηση:Ρομπόζια CSS

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

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

Αναφορά:Ενότητα CSS border-top-left-radius

Αναφορά:Ενότητα CSS border-top-right-radius

Αναφορά:CSS ιδιότητα κατεύθυνσης

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

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