Outline-color özelliği anahattın rengini ayarlamak için kullanılır.
Renk şu şekilde ayarlanabilir:
- renk adı – “kırmızı” gibi bir renk adı belirtin
- HEX – “#ff0000” gibi bir onaltılık değer belirtin
- RGB – “rgb(255,0,0)” gibi bir RGB değeri belirtin
- HSL – “hsl(0, %100, %50)” gibi bir HSL değeri belirtin
- invert (ters renk) – rengi ters çevirir (bu, arka plan renginden bağımsız olarak ana hattın görünür olmasını sağlar)
Aşağıdaki örnekte farklı renklere sahip bazı farklı ana hatlar gösterilmektedir. Ayrıca bu öğelerin dış hat içinde ince siyah bir kenarlığa sahip olduğuna da dikkat edin:
<!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>
<p class="ex1">kırmızı çizgi.</p>
<p class="ex2">noktalı mavi.</p>
<p class="ex3">3d gri.</p>
</body>
</html>
HEX Değerleri
Anahat rengi onaltılık bir değer (HEX) kullanılarak da belirtilebilir:
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* Kırmızı*/
}RGB Values
Veya RGB değerlerini kullanarak:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* Kırmızı */
}HSL Değerleri
HSL değerlerini de kullanabilirsiniz:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* Kırmızı */
}