CSS border-inline-color στοιχεία

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

border-inline-color ιδιότυπο να ρυθμίσει την χρώση των ορίων του στο κλίμακα

Σημείωση:για να κάνει border-inline-color ο ιδιότυπος να λειτουργήσει, πρέπει να οριστεί border-inline-style.

border-inline-color οι τιμές του ιδιότυπου μπορούν να οριστούν με διάφορους τρόπους:

αν border-inline-color ιδιότυπος έχει δύο τιμές:

border-inline-color: ροζ μπλε;
  • η χρώση της κλίμακας αρχικής κατάστασης είναι ροζ
  • η χρώση της κλίμακας τελικής κατάστασης είναι μπλε

αν border-inline-color ιδιότυπος έχει μια τιμή:

border-inline-color: blue;
  • η χρώση της οριζόντιας και κάθετης κλίμακας κατώτερης όριας της γραμμής είναι μπλε

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

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

Παράδειγμα

Παράδειγμα 1

Ορισμός χρώματος για την οριζόντια κατεύθυνση του πλαισίου:

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

Προσπαθήστε το شخصικά

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

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

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Προσπαθήστε το شخصικά

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

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

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

Προσπαθήστε το شخصικά

Γλώσσα CSS

border-inline-color: Η προεπιλεγμένη χρώση είναι η τρέχουσα χρώση του στοιχείου.|διαφανές|initial|inherit;

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

Τιμή Περιγραφή
Η προεπιλεγμένη χρώση είναι η τρέχουσα χρώση του στοιχείου.

Καθορίστε τη χρώση του πλαισίου.

Ελέγξτε τις τιμές των χρωμάτων CSS για να δείτε τη πλήρη λίστα των πιθανών χρωμάτων.
διαφανές Καθορίστε τη χρώση του πλαισίου να είναι διαφανής.
initial Αναθέστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

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

Προεπιλεγμένη τιμή: Η τρέχουσα χρώση του στοιχείου
Προγενέστερη κληρονομικότητα: Όχι
Προσθήκη αнимации: Υποστήριξη. Δείτε:Στοιχεία αнимации.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.borderInlineColor="pink"

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

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

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

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

Εκμάθηση:CSS Περιθώρια

Αναφορά:CSS border στοιχεία

Αναφορά:CSS border-inline στοιχεία

Αναφορά:Η ιδιότητα CSS border-inline-style

Αναφορά:CSS border-bottom-color στοιχεία

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

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

Αναφορά:Η ιδιότητα CSS border-top-color

Αναφορά:CSS direction attribute

Αναφορά:CSS text-orientation 属性

Αναφορά:CSS writing-mode 属性