Κύμα CSS

Ιδιότητες περιγράμματος CSS

CSS border Η ιδιότητα επιτρέπει την καθοδήγηση του στυλ, πλάτους και χρώματος του περιγράμματος του στοιχείου.

Όλα τα περιγράμματά μου έχουν όρια.

Έχω ένα κόκκινο κάτω περιγράμμα.

Έχω περιγράμμα με γωνίες.

Έχω ένα μπλε αριστερό περιγράμμα.

Στυλ περιγράμματος CSS

border-style Η ιδιότητα καθορίζει το τύπο περιγράμματος που θα εμφανιστεί.

Επιτρέπονται οι εξής τιμές:

  • dotted - Ορισμός σημείωσης περιγράμματος
  • dashed - Ορισμός ακανόνιστου περιγράμματος
  • solid - Ορισμός σκληρού περιγράμματος
  • double - Ορισμός διπλού περιγράμματος
  • groove - Ορισμός 3D groove περιγράμματος. Η επίδραση εξαρτάται από την τιμή του border-color
  • ridge - Ορισμός 3D ridge περιγράμματος. Η επίδραση εξαρτάται από την τιμή του border-color
  • inset - Ορισμός 3D inset περιγράμματος. Η επίδραση εξαρτάται από την τιμή του border-color
  • outset - Ορισμός 3D outset περιγράμματος. Η επίδραση εξαρτάται από την τιμή του border-color
  • none - Ορισμός περιγράμματος χωρίς όρια
  • hidden - Ορισμός κρυμμένου περιγράμματος

border-style Η ιδιότητα μπορεί να ορίσει μια έως τέσσερις τιμές (για το πάνω περιγράμμα, το δεξί περιγράμμα, το κάτω περιγράμμα και το αριστερό περιγράμμα).

Παράδειγμα

Δείγμα διαφορετικών στυλ περιγράμματος:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Αποτέλεσμα:

Ορίων σημείων

Ορίων ελαφράς γραμμής

Ορίων οριζόντιας γραμμής

Ορίων διπλής γραμμής

Ορίων δέκα

Ορίων λοξής

Ορίων 3D inset. Το αποτέλεσμα εξαρτάται από τη τιμή του border-color.

Ορίων 3D outset. Το αποτέλεσμα εξαρτάται από τη τιμή του border-color.

Χωρίς όριο

Κρυφή όριο

Μίγμα ορίων

Προσπαθήστε να το δοκιμάσετε!

Σημείωση:Μگر αν έχει οριστεί border-style Αν δεν οριστεί η ιδιότητα, τότε άλλες ιδιότητες κουτιού CSS (θα εξηγηθούν λεπτομερώς στο επόμενο κεφάλαιο) δεν θα έχουν καμία επίδραση!