CSS border-start-end-radius characteristic

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

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

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

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

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

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

border-start-end-radius: 50px;

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

Παράδειγμα

Παράδειγμα 1

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

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

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

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

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

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

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

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

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

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

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

Γλώσσα γραφικής γλώσσας

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

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

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

Υποστήριξη του προγράμματος περιήγησης

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

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

Εκμάθηση:Γωνία CSS

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

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

Αναφορά:CSS border-top-left-radius characteristic

Αναφορά:CSS border-top-right-radius characteristic

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

Αναφορά:Οριζόντια κατεύθυνση κειμένου CSS

Αναφορά:Μέθοδος γραφής CSS