Χρώμα Περιθωρίου CSS

Χρώμα Περιθωρίου CSS

border-color This attribute is used to set the color of the four borders.

Colors can be set in the following ways:

  • name - Specify color name, such as "red"
  • HEX - Specify hexadecimal values, such as "#ff0000"
  • RGB - Specify RGB values, such as "rgb(255,0,0)"
  • HSL - Specify HSL values, such as "hsl(0, 100%, 50%)"
  • transparent

Note:If not set border-colorIf not set, it will inherit the color of the element.

Παράδειγμα

Demonstrate different border colors:

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Result:

Red solid border

Green solid border

Blue dotted border

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

Specific border color

border-color The attribute can be set to one to four values (used for top border, right border, bottom border, and left border).

Παράδειγμα

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

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

Τιμές HEX

Η απόχρωση του περιγράμματος μπορεί επίσης να καθοριστεί με τιμές εξαδεκαδικού (HEX):

Παράδειγμα

p.one {
  border-style: solid;
  border-color: #ff0000; /* Κόκκινο */
}

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

Τιμές RGB

Ή χρησιμοποιήστε τιμές RGB:

Παράδειγμα

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* Κόκκινο */
}

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

Τιμές HSL

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

Παράδειγμα

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* Κόκκινο */
}

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

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