Anahat, öğenin sınırının dışına çizilen bir çizgidir.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>Bu öğenin 2 piksellik siyah bir kenarlığı ve 10 piksel genişliğinde yeşil bir çerçevesi vardır.</p>
</body>
</html>
CSS Outline
Anahat, öğenin “öne çıkmasını” sağlamak için öğelerin etrafına, sınırların DIŞINA çizilen bir çizgidir.
CSS aşağıdaki anahat özelliklerine sahiptir:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Not: Anahat kenarlıklardan farklıdır! Kenarlığın aksine, ana hat öğenin kenarlığının dışına çizilir ve diğer içerikle örtüşebilir. Ayrıca dış hat, öğenin boyutlarının bir parçası DEĞİLDİR; öğenin toplam genişliği ve yüksekliği anahattın genişliğinden etkilenmez.
CSS Outline Style
Outline-style özelliği, anahattın stilini belirtir ve aşağıdaki değerlerden birine sahip olabilir:
dotted– Noktalı bir anahat tanımlardashed– Kesikli bir anahat tanımlarsolid– Düz bir çizgi anahat tanımlardouble– Çift çizgili anahat tanımlargroove– 3D oluklu anahat tanımlarridge– 3d çıkıntılı anahat tanımlarinset– 3D iç metin taslağı tanımlaroutset– 3D anahat tanımlarnone– Anahat tanımlamazhidden– Anahattı gizler
Aşağıdaki örnek farklı anahat stili değerlerini gösterir:
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<p class="dotted">Noktalı</p>
<p class="dashed">Kesik Çizgili</p>
<p class="solid">Düz çizgili</p>
<p class="double">Çift Çizgili</p>
<p class="groove">Gölgeli 3D.</p>
<p class="ridge">3d Dış hat.</p>
<p class="inset">Efektli dış hat.</p>
<p class="outset">Efektli dış hat.</p>
</body>
</html>
