Χρώμα περιγράμματος CSS

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

    Εμφάνιση πίνακα περιεχομένων

Χρώμα περιγράμματος CSS

Η ιδιότητα outline-color χρησιμοποιείται για τον ορισμό του χρώματος του περιγράμματος.

Το χρώμα μπορεί να οριστεί από:

  • όνομα - καθορίστε ένα όνομα χρώματος, όπως "κόκκινο"

  • HEX - καθορίστε μια τιμή hex, όπως "#ff0000"

  • RGB - καθορίστε μια τιμή RGB, όπως "rgb(255,0,0)"

  • HSL - καθορίστε μια τιμή HSL, όπως "hsl(0, 100%, 50%)"

  • invert - εκτελεί μια αντιστροφή χρώματος (που διασφαλίζει ότι το περίγραμμα είναι ορατό, ανεξάρτητα από το χρώμα του φόντου)

Το παρακάτω παράδειγμα δείχνει μερικά διαφορετικά περιγράμματα με διαφορετικά χρώματα. Προσέξτε επίσης ότι αυτά τα στοιχεία έχουν επίσης ένα λεπτό μαύρο περίγραμμα μέσα στο περίγραμμα:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Παράδειγμα

p.ex1
{
    border: 2px solid black;	outline-style: solid;
  outline-color: red;
}
p.ex2
{
  border: 2px solid black;	outline-style: dotted;
   
outline-color: blue;
}
p.ex3
{
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

Τιμές HEX

Το χρώμα του περιγράμματος μπορεί επίσης να καθοριστεί χρησιμοποιώντας μια δεκαεξαδική τιμή (HEX):

Παράδειγμα

 p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Τιμές RGB

Ή χρησιμοποιώντας τιμές RGB:

Παράδειγμα

 p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 
  red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Τιμές HSL

Μπορείτε επίσης να χρησιμοποιήσετε τιμές HSL:

Παράδειγμα

 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

Μπορείτε να μάθετε περισσότερα για τις τιμές HEX, RGB και HSL στα κεφάλαια CSS Colors.