CSS Anahat Uzaklığı

İçindekiler

    İçindekiler tablosunu göster

CSS Anahat Uzaklığı

outline-offset özelliği alan ekler bir ana hat ile bir öğenin kenarı/kenarlığı arasında. Bir arasındaki boşluk öğesi ve ana hatları şeffaftır.

Aşağıdaki örnek, kenarlık kenarının 15 piksel dışında bir anahattı belirtir:

This paragraph has an outline 15px outside the border edge.

Örnek

 p {
  margin: 30px;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

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

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

Aşağıdaki örnek, bir öğe ile onun ana hatları arasındaki boşluğun şeffaftır:

This paragraph has an outline of 15px outside the border edge.

Örnek

 p {
  margin: 30px;
  background: 
  yellow;
  border: 1px solid black;
  outline: 
  1px solid red;
  
  outline-offset: 15px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

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

<p>This paragraph has an outline of 15px outside the border edge.</p>

</body>
</html>

Tüm CSS Anahat Özellikleri

outline

Anahat genişliğini, anahat stilini ve anahat stilini ayarlamak için kısayol özelliği tek bildirimde anahat rengi

outline-color

Bir anahattın rengini ayarlar

outline-offset

Bir ana hat ile bir öğenin kenarı veya kenarlığı arasındaki boşluğu belirtir

outline-style

Bir taslağın stilini ayarlar

outline-width

Bir anahattın genişliğini ayarlar