Κύρια Περιθώρια Όλων των Ορίων CSS

CSS Πύλες - Απλές πύλες

Από το παράδειγμα του προηγούμενου κεφαλαίου, έχετε δει ότι μπορείτε να καθορίσετε διαφορετικές πύλες για κάθε πλευρά.

Στο CSS, υπάρχουν επίσης ιδιότητες που μπορούν να καθορίσουν κάθε πύλη ( επάνω, δεξιά, κάτω και αριστερά):

Παράδειγμα

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Το αποτέλεσμα είναι:

Διαφορετικοί τύποι πυλών

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

Διαφορετικοί τύποι πυλών

Το αποτέλεσμα του παραδείγματος είναι το ίδιο με αυτό:

Παράδειγμα

p {
  border-style: dotted solid;
}

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

Το μηχανισμό λειτουργίας του είναι το εξής:

Αν border-style Η ρύθμιση των ιδιοτήτων περιλαμβάνει τέσσερις τιμές:

border-style: dotted solid double dashed;

  • Η επάνω πύλη είναι αβέβαιη γραμμή
  • Η δεξιά πύλη είναι γεμάτη γραμμή
  • Η κάτω πύλη είναι διπλή γραμμή
  • Η αριστερή πύλη είναι αβέβαιη γραμμή

Αν border-style Η ρύθμιση των ιδιοτήτων περιλαμβάνει τρεις τιμές:

border-style: dotted solid double;

  • Η επάνω πύλη είναι αβέβαιη γραμμή
  • το δεξί και το αριστερό όριο είναι solid lines
  • Η κάτω πύλη είναι διπλή γραμμή

Αν border-style Η αξία της ιδιότητας ορίζει δύο τιμές:

border-style: dotted solid;

  • το πάνω και το κάτω όριο είναι dotted lines
  • το δεξί και το αριστερό όριο είναι solid lines

Αν border-style Η αξία της ιδιότητας ορίζει μια τιμή:

border-style: dotted;

  • Όλα τα πέντε όρια είναι dotted lines

Παράδειγμα

/* Τέσσερις τιμές */
p {
  border-style: dotted solid double dashed; 
}
/* Τρεις τιμές */
p {
  border-style: dotted solid double; 
}
/* Δύο τιμές */
p {
  border-style: dotted solid; 
}
/* Μια τιμή */
p {
  border-style: dotted; 
}

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

στο παρακάτω παράδειγμα χρησιμοποιήθηκε border-style Αξία. Αλλά border-width και border-color είναι επίσης ισχύουσα.