css-anahat-outline

Anahat, elemanı "dışa fırlatmak" için, sınırların dışında Etrafında çizilen bir çizgidir.

CSS şu anahat özelliklerine sahiptir:
outline-style
outline-color
outline-width
outline-offset
outline
Not: Anahat sınırlardan farklı! Kenarlıktan farklı olarak, anahat elemanın kenarlığı dışına çizilir ve diğer içeriklerle örtüşebilir. Ayrıca, taslak Elemanın boyutlarının bir parçası değildir. öğenin toplam genişliği ve yüksekliği, anahat genişliğinden etkilenmez.
Anahat Stili
outline-style Mülkiyet anahat stilini belirtir ve aşağıdaki değerlerden birine sahip olabilir:

dotted - Noktalı bir anahattı tanımlar
dashed - Kesikli bir anahattı tanımlar
solid - Sağlam bir anahattı tanımlar
double - Çift anahattı tanımlar
groove - 3D oluklu bir taslağı tanımlar
ridge - 3B çıkıntılı bir taslağı tanımlar
inset - Bir 3 boyutlu iç çerçeve taslağını tanımlar
outset - 3D başlangıç ​​anahatını tanımlar
none - Anahattı tanımlamaz
hidden - Gizli bir anahattı tanımlar
p {outline-style: dotted;}

Anahat Rengi
outline-color Mülkiyet anahat rengini ayarlamak için kullanılır.
Renk şu şekilde ayarlanabilir:
isim - "kırmızı" gibi bir renk adı belirtin
RGB - "rgb (255,0,0)" gibi bir RGB değeri belirtin
Hex - "# ff0000" gibi bir onaltılık değer belirtin
invert - renk değişimi yapar (renk arka planına bakılmaksızın ana hattın görünür olmasını sağlar)
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}

Anahat Genişliği
outline-width Mülkiyet anahat genişliğini belirtir ve aşağıdaki değerlerden birine sahip olabilir:
ince (tipik olarak 1 piksel)
orta (tipik olarak 3px)
kalın (tipik olarak 5px)
Belirli bir boyut (px, pt, cm, em vb.)
p {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}

Anahat - Kısa kullanım özelliği
outline Mülkiyet şu bireysel anahat özelliklerini ayarlamak için bir kestirme niteliktir:
outline-width
outline-style (gereklidir)
outline-color
outline Özelliği yukarıdaki listeden bir, iki veya üç değerleri olarak belirtilir. Değerlerin sırası önemli değil.
p {outline: 5px solid yellow;}

Anahat Ofset
outline-offset Özelliği çizgisi ve bir elemanın kenar / sınırı arasındaki boşluk ekler. Bir eleman ve anahat arasındaki boşluk şeffaftır.
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}