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

Πίνακας περιεχομένων

Ένα περίγραμμα είναι μια γραμμή που σχεδιάζεται έξω από το περίγραμμα του στοιχείου.

This element has a black border and a green outline with a width of 10px.

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

Περίγραμμα CSS

Περίγραμμα είναι μια γραμμή που χαράσσεται γύρω από στοιχεία, ΕΞΩ από τα σύνορα, για να κάνει το στοιχείο "να ξεχωρίζει".

Το CSS έχει τις ακόλουθες ιδιότητες περιγράμματος:

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

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

Στυλ περίγραμμα CSS

Η ιδιότητα outline-style καθορίζει το στυλ του περιγράμματος, και μπορεί να έχει μία από τις ακόλουθες τιμές:

dotted: - Καθορίζει ένα διάστικτο περίγραμμα
dashed: - Ορίζει ένα διακεκομμένο περίγραμμα
solid: - Καθορίζει ένα συμπαγές περίγραμμα
double: - Καθορίζει ένα διπλό περίγραμμα
groove: - Καθορίζει ένα τρισδιάστατο αυλακωτό περίγραμμα
ridge: - Καθορίζει ένα τρισδιάστατο περίγραμμα με ραβδώσεις
inset: - Καθορίζει ένα τρισδιάστατο ένθετο περίγραμμα
outset: - Καθορίζει ένα τρισδιάστατο αρχικό περίγραμμα
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;}

Αποτέλεσμα:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Σημείωση: Καμία από τις άλλες ιδιότητες του περιγράμματος (για τις οποίες θα μάθετε περισσότερα στα επόμενα κεφάλαια) δεν θα έχει ΟΠΟΙΑΔΗΠΟΤΕ επίδραση εκτός εάν Η ιδιότητα class="w3-codespan">outline-style έχει οριστεί!