CSS border-style attribute

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

Η ιδιότητα border-style χρησιμοποιείται για να καθορίζει τον τύπο των γραμμών όλων των περιθωρίων του στοιχείου, ή να καθορίζει τον τύπο των γραμμών των περιθωρίων ανεξάρτητα.

Η γραμμή θα εμφανιστεί μόνο όταν αυτός ο δείκτης δεν είναι none.

Παράδειγμα 1

border-style:dotted solid double dashed;
  • Το επάνω περιθώριο είναι κουκκώματα
  • Το δεξί περιθώριο είναι γεμάτο
  • Το κάτω περιθώριο είναι διπλό
  • Το αριστερό περιθώριο είναι αχνό

Παράδειγμα 2

border-style:dotted solid double;
  • Το επάνω περιθώριο είναι κουκκώματα
  • Το δεξί και το αριστερό περιθώριο είναι γεμάτα
  • Το κάτω περιθώριο είναι διπλό

Παράδειγμα 3

border-style:dotted solid;
  • Το επάνω και το κάτω περιθώριο είναι κουκκώματα
  • Το δεξί και το αριστερό περιθώριο είναι γεμάτα

Παράδειγμα 4

border-style:dotted;
  • Όλα τα 4 κύρια περιθώρια είναι κουκκώματα

Δείτε επίσης:

CSS Εκμάθηση:CSS πλαισίων

Βιβλίο αναφοράς HTML DOM:Ατрибούτο borderStyle

Παράδειγμα

Ρυθμίστε το στυλ των τεσσάρων πλαισίων:

p
  {
  border-style:solid;
  }

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

Γλώσσα γραμματοσειράς CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Τιμή προθέματος

Τιμή Περιγραφή
none Ορίζει πλαίσιο χωρίς πλαίσιο.
hidden Το ίδιο με το "none". Ωστόσο, εφαρμόζεται σε πίνακες, όπου το "hidden" χρησιμοποιείται για την επίλυση συγκρούσεων πλαίσιων.
dotted Ορίζει σημαδιακή πλαίσιο. Σε πολλές περιπτώσεις εμφανίζεται ως οριζόντια γραμμή.
dashed Ορίζει κενή γραμμή. Σε πολλές περιπτώσεις εμφανίζεται ως οριζόντια γραμμή.
solid Ορίζει οριζόντια γραμμή.
double Ορίζει διπλή γραμμή. Η πλάτος της γραμμής ισούται με την τιμή του border-width.
groove Ορίζει το 3D grooved πλαίσιο. Το αποτέλεσμα εξαρτάται από την τιμή του border-color.
ridge Ορίζει το 3D ribbed πλαίσιο. Το αποτέλεσμα εξαρτάται από την τιμή του border-color.
inset Ορίζει το 3D inset πλαίσιο. Το αποτέλεσμα εξαρτάται από την τιμή του border-color.
outset Ορίζει το 3D outset πλαίσιο. Το αποτέλεσμα εξαρτάται από την τιμή του border-color.
inherit Καθορίζει ότι το στυλ πλαισίου πρέπει να προέλθει από το γονικό στοιχείο.

Περιγραφή

Το πιο απρόβλεπτο στυλ πλαισίου είναι το double. Ορίζεται ως η πλάτος των δύο γραμμών και ο χώρος μεταξύ τους που ισούται με το border-width. Ωστόσο, η规约 του CSS δεν αναφέρει αν μια γραμμή είναι πιο πυκνή από την άλλη ή αν οι δύο γραμμές πρέπει να είναι ίδιες. Επίσης, δεν αναφέρεται αν ο χώρος μεταξύ των γραμμών πρέπει να είναι πιο πυκνός από τις γραμμές. Όλα αυτά αποφασίζονται από τον χρήστη προγράμματος περιήγησης και οι δημιουργοί δεν έχουν καμία επίδραση σε αυτή την απόφαση.

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

Προεπιλεγμένη τιμή: not specified
Προέλευση: no
Έκδοση: CSS1
Γλώσσα γραμματοσειράς JavaScript: object.style.borderStyle="dotted double"

Περισσότερα παραδείγματα

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

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

Τα αριθμήματα στην τаблицή περιγράφουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα αυτή.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5