Εικόνα Περιγράμματος CSS

Εικόνα Περιγράμματος CSS

Με τη χρήση του CSS border-image Ιδιότητες που επιτρέπουν τη ρύθμιση της εικόνας να χρησιμοποιείται ως πύλη γύρω από το στοιχείο.

Ιδιότητες CSS border-image

CSS border-image Η ιδιότητα επιτρέπει να καθοριστεί η εικόνα που θα χρησιμοποιηθεί, αντί να περιβάλλει την κανονική πύλη.

Η ιδιότητα έχει τρία μέρη:

  • Η εικόνα που χρησιμοποιείται ως πύλη
  • Πού θα κόψει η εικόνα
  • Ορίζει αν η μεσαία περιοχή θα επαναληφθεί ή θα επεκταθεί

Θα χρησιμοποιήσουμε αυτή την εικόνα ("border.png")

border-image Η ιδιότητα αποδέχεται εικόνες, τις κόβει σε εννέα μέρη, όπως το πίνακα του διχασμού. Στη συνέχεια, τοποθετεί τις γωνίες στα γωνία και επαναλαμβάνει ή επεκτείνει τη μεσαία περιοχή ανάλογα με τις ρυθμίσεις σας.

Σημείωση:Για να κάνει border-image Επιτρέπει, η στοιχείο πρέπει επίσης να ρυθμιστεί border Ιδιότητες!

Σε αυτή την περίπτωση, η μεσαία περιοχή της εικόνας επαναλαμβάνεται για να δημιουργήσει την πύλη:

Η εικόνα χρησιμοποιείται ως πύλη!

Αυτό είναι το κώδικας:

Παράδειγμα

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

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

Σε αυτή την περίπτωση, η μεσαία περιοχή της εικόνας επεκτείνεται για να δημιουργήσει την πύλη:

Η εικόνα χρησιμοποιείται ως πύλη!

Αυτό είναι το κώδικας:

Παράδειγμα

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

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

Συμβουλή:border-image Η ιδιότητα είναι μια συντομευμένη μορφή των παρακάτω ιδιοτήτων:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - διαφορετικές τιμές κόψης

Διαφορετικές τιμές κόψης θα αλλάξουν εντελώς την εμφάνιση της πύλης:

Παράδειγμα 1:

border-image: url(border.png) 50 round;

Παράδειγμα 2:

border-image: url(border.png) 20% round;

Παράδειγμα 3:

border-image: url(border.png) 30% round;

Αυτό είναι το κώδικας:

Παράδειγμα

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

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

CSS Ιδιότητες Εικόνας Πύλης

Ιδιότητα Περιγραφή
border-image Ασύντομη ιδιότητα που χρησιμοποιείται για να ρυθμίσετε όλες τις ιδιότητες border-image-*.
border-image-source Ο δείκτης της διαδρομής της εικόνας που χρησιμοποιείται ως πύλη.
border-image-slice Περιγράφει πώς θα κόβεται η εικόνα του border.
border-image-width Περιγράφει το πλάτος της εικόνας του border.
border-image-outset Περιγράφει την ποσότητα που η περιοχή της εικόνας του border θα εκτείνεται πέρα από το κουτί του border box.
border-image-repeat Περιγράφει πώς θα επαναλαμβάνεται, θα γίνει γωνιακή ή θα κλιμακώνεται η εικόνα του border.