Πλευρές συνόρων CSS

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

CSS Border - Μεμονωμένες πλευρές

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

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

Παράδειγμα

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

Αποτέλεσμα:

Different Border Styles

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

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

Παράδειγμα

p {	border-style: dotted solid;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

Λοιπόν, ορίστε πώς λειτουργεί:

Εάν η ιδιότητα class="w3-codespan">border-style έχει τέσσερις τιμές:

στυλ περιγράμματος: διακεκομμένη συμπαγής διπλή διακεκομμένη.
- το επάνω περίγραμμα είναι διάστικτο
- το δεξί περίγραμμα είναι συμπαγές
- το κάτω περίγραμμα είναι διπλό
- το αριστερό περίγραμμα είναι διακεκομμένο

Εάν η ιδιότητα class="w3-codespan">border-style έχει τρεις τιμές:

στυλ περιγράμματος: διακεκομμένο συμπαγές διπλό;
- το επάνω περίγραμμα είναι διάστικτο
- τα δεξιά και τα αριστερά περιθώρια είναι συμπαγή
- το κάτω περίγραμμα είναι διπλό

Εάν η ιδιότητα class="w3-codespan">border-style έχει δύο τιμές:

στυλ περιγράμματος: διακεκομμένο συμπαγές;
- τα άνω και κάτω περιγράμματα είναι διακεκομμένα
- τα δεξιά και τα αριστερά περιθώρια είναι συμπαγή

Εάν η ιδιότητα class="w3-codespan">border-style έχει μία τιμή:

στυλ περιγράμματος: διάστικτη;
- και τα τέσσερα σύνορα είναι διακεκομμένα

Παράδειγμα

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

Η ιδιότητα class="w3-codespan">στυλ συνόρων χρησιμοποιείται στο παραπάνω παράδειγμα. Ωστόσο, λειτουργεί επίσης με class="w3-codespan">πλάτος περιγράμματος και class="w3-codespan">χρώμα περιγράμματος.