Προφίλ CSS

Αυτό το στοιχείο έχει μαύρο περιθώριο και μπλε όριο, πλάτος 10px.

Προφίλ CSS

Το όριο είναι μια γραμμή που ζωγραφίζεται γύρω από το στοιχείο, έξω από τα όρια του, για να ξεχωρίσει το στοιχείο.

Το CSS έχει τις εξής ιδιότητες ορίου:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Σημείωση:Το όριο καιΠεριθώριοΔιαφορετικά! Η διαφορά είναι ότι το όριο ζωγραφίζεται έξω από τα όρια του στοιχείου και μπορεί να συγκρούεται με άλλο περιεχόμενο. Επίσης, το όριο δεν είναι μέρος του μεγέθους του στοιχείου; Το συνολικό πλάτος και ύψος του στοιχείου δεν επηρεάζεται από το πλάτος της γραμμής του ορίου.

Στυλ ορίου CSS

Η ιδιότητα outline-style καθορίζει τον τύπο του ορίου και μπορεί να ρυθμιστεί ως εξής:

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

Το παρακάτω παράδειγμα δείχνει διαφορετικές τιμές του outline-style:

Παράδειγμα

Παρουσίαση διαφορετικών τύπων ορίου:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Αποτέλεσμα:

Προφίλ σημείων.

Προφίλ αβέβαιης γραμμής.

Προφίλ ακριβούς γραμμής.

Προφίλ διπλής γραμμής.

Προφίλ ράβδου 3D. Το αποτέλεσμα εξαρτάται από την τιμή του outline-color.

Προφίλ ράβδου 3D. Το αποτέλεσμα εξαρτάται από την τιμή του outline-color.

Προφίλ γωνίας 3D. Το αποτέλεσμα εξαρτάται από την τιμή του outline-color.

Προφίλ γωνίας 3D. Το αποτέλεσμα εξαρτάται από την τιμή του outline-color.

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

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