Etiket: outline

CSS outline-width

outline-width :

Bir elementin outline çizgisinin kalınlığını belirlemek için kullanılır.

Örnek

div {
  width: 300px;
  padding: 20px;
  outline-style: dashed;
  outline-color: green;
  outline-width: 10px;
  margin: 30px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
medium Outline genişliğini orta olarak ayarlar.
thin Outline genişliğini ince olarak ayarlar.
thick Outline genişliğini kalın olarak ayarlar.
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS outline-style

outline-style :

Bir element sınırları ile outline çizgisinin stilini ayarlamak için kullanılır.

Örnek

div {
   outline-style: dashed;
   outline-color: green;
  width: 300px;
  padding: 20px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Outline çizgisini kaldırır.
hidden Outline çizgisini gizler.
dotted Noktalı outline çizgisini çizer.
dashed Kesik çizgili outline çizgisini çizer.
solid Düz outline çizgisini çizer.
double Çift outline çizgisini çizer.
groove 3D grooved(Yivli) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
ridge 3D ridge(Çıkıntılı) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
inset 3D inset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
outset 3D outset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 outline-offset

outline-offset :

Bir element sınırları ile outline çizgisinin arasındaki mesafeyi ayarlamak için kullanılır.

Örnek

div {
    margin: 40px;
    width: 200px;
    outline: 5px solid green;
    outline-offset: 20px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length px, cm, % gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 Desteklenmiyor 3.1 10.5
Posted on by Samed GÖZÜTOK 0

CSS outline-color

outline-color :

Outline’ın rengini belirlemek için kullanılır.

Örnek

div {
    width: 200px;
    padding: 50px;
    outline-style: dashed;
    outline-color: #00ff00;
}

Codepen Ön izleme

 

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
invert Rengi arka planı gösterecek şekilde şeffaf yapar.
color Bir renk değeri alır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 1

CSS outline

outline :

Bir element sınırları dışında çizili olan çizgidir. Ayarlanabilir özellikleri sırayla: rengi – tarzı – genişliği’dir. Yukarıdaki değerlerden biri eksik olursa varsayılan değer geçerli olacaktır.

Örnek

div {
  width: 200px;
  outline: red dashed thick;
  padding: 20px;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
outline-color Outline rengini ayarlamak için kullanılır.
outline-style Outline stilini ayarlamak için kullanılır.
outline-width Outline genişliğini(kalınlığını) ayarlamak için kullanılır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0