css-kenarlik-border

CSS borderözellikleri, bir öğenin kenarlık stilini, genişliğini ve rengini belirtmenizi sağlar.

border-styleMülkiyet sınırın tür neyin gösterileceğini belirtir.

dotted - Noktalı bir kenarlığı tanımlar

dashed - Kesikli kenarlığı tanımlar

solid - Sağlam bir sınır tanımlar

double - Çift kenarlığı tanımlar

groove- 3D oluklu bir kenarlığı tanımlar. Etki sınır renk değerine bağlı

ridge- B düzleştirilmiş bir sınır tanımlar. Etki sınır renk değerine bağlı

inset- 3D yerleştirme kenarlığını tanımlar. Etki sınır renk değerine bağlı

outset- 3D başlangıcı sınırını tanımlar. Etki sınır renk değerine bağlı

none - Sınır tanımlamaz

hidden - Gizli bir kenarlığı tanımlar

border-style Mülkiyet ila dört değerlerden (üst sınırına doğru sınırında, alt sınırın ve sol sınır için) olabilir.



p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}



Not:border-style Özellik ayarlanmadıkça , aşağıda açıklanan OTHER CSS kenarlık özelliklerinden hiçbiri HERHANGİ bİR etkili olmaz !



Sınır Genişliği

border-widthÖzelliği dört kenar genişliğini belirtir.

Genişlik belirli bir boyut (px, pt, cm, em, vb.) Olarak veya önceden tanımlanmış üç değerden birini kullanarak ayarlanabilir: ince, orta veya kalın.

border-widthMülkiyet ila dört değerlerden (üst sınırına doğru sınırında, alt sınırın ve sol sınır için) olabilir.



p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;

}

p.three {

border-style: solid;

border-width: 2px 10px 4px 20px;

}



Sınır rengi

border-colorNiteliği dört kenar çizgisinin rengini ayarlamak için kullanılır.

isim - "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

transparent (şeffaf)

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: green;

}

p.three {

border-style: solid;

border-color: red green blue yellow;

}



Sınır - Bireysel Yönler

CSS'de, kenarlıkların her birini (üst, sağ, alt ve sol) belirlemek için özellikler de vardır:

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

}

Yukarıdaki örnek, bununla aynı sonucu verir:

p {

border-style: dotted solid;

}

Peki, işler nasıl işliyor:



Eğer border-styleözellik dört değer vardır:



border-style: noktalı katı çift çizgi;

top border is dotted üst sınır noktalı

right border is solid sağ kenarlık sağlam

bottom border is double alt sınır çift

left border is dashed sol sınır kesikli

Eğer border-stylemülkiyet üç değer vardır:



border-style: noktalı katı çift;

top border is dotted üst sınır noktalı

right and left borders are solid sağ ve sol kenarlıklar sağlam

bottom border is double alt sınır çift

Eğer border-styleözellik iki değer vardır:

border-style: dotted solid; border-style: noktalı katı;

op and bottom borders are dotted üst ve alt sınırlar noktalı

right and left borders are solid sağ ve sol kenarlıklar sağlam

Eğer border-styleözellik bir değeri vardır:

border-style: dotted; border-style: noktalı;

all four borders are dotted dört sınırın hepsi noktalı

border-styleÖzelliği yukarıdaki örnekte kullanılmıştır. Ancak, aynı zamanda çalışır border-width ve border-color.



Sınır - Kıymetli eşya

Yukarıdaki örneklerden de görebileceğiniz gibi, sınırlarla uğraşırken göz önüne alınması gereken birçok özellik vardır.

Kodu kısaltmak için, tek bir mülkteki tüm bireysel kenarlık özelliklerini belirtmek de mümkündür.

borderMülkiyet şu bireysel sınır özellikler için bir kestirme niteliktir:

border-width

border-style (gereklidir)

border-color

p {

border: 5px solid red;

}

Ayrıca, tek taraf için tüm bireysel kenarlık özelliklerini belirtebilirsiniz:

Sol Sınır

p {

border-left: 6px solid red;

background-color: lightgrey;

}

Alt sınır

p {

border-bottom: 6px solid red;

background-color: lightgrey;

}



Yuvarlak Sınırlar

border-radiusÖzelliği, bir elemana yuvarlak sınırları eklemek için kullanılır:

p {

border: 2px solid red;

border-radius: 5px;

}

Not:border-radius özellik IE8 ve önceki sürümlerinde desteklenmez.



border Sets all the border properties in one declaration

border-bottom Tüm alt kenarlık özelliklerini bir bildirimde ayarlar

border-bottom-color Alt kenarlığın rengini ayarlar

border-bottom-style Alt kenarlığın stilini ayarlar

border-bottom-width Alt kenarlığın genişliğini ayarlar

border-color Dört sınırın rengini ayarlar

border-left Bir bildirimde tüm sol kenarlık özelliklerini ayarlar

border-left-color Sol kenarlık rengini ayarlar

border-left-style Sol kenarlık stilini ayarlar

border-left-width Sol kenarlık genişliğini ayarlar

border-radius Yuvarlak köşeler için dört border - * - radius özelliklerini ayarlar.

border-right Bir bildirimde tüm doğru kenarlık özelliklerini ayarlar

border-right-color Sağ kenarlık rengini ayarlar

border-right-style Sağ kenarlığın stilini ayarlar

border-right-width Sağ kenarlığın genişliğini ayarlar

border-style Dört sınırın stilini ayarlar

border-top Bir üst bildiride tüm üst sınır özelliklerini ayarlar

border-top-color Üst kenarlığın rengini ayarlar

border-top-style Üst kenarlığın stilini ayarlar

border-top-width Üst kenarlığın genişliğini ayarlar

border-width Dört sınırın genişliğini ayarlar