8.1 border xassəsi
Sərhədlər — veb-dizaynın vacib tərəflərindən biridir. Onlar elementləri vurğulamağa və səhifənin vizual görünüşünü yaxşılaşdırmağa kömək edir. CSS sərhədləri yaratmaq və tərtib etmək üçün çoxlu xassələr təqdim edir. Gəlin, sərhədlər üçün əsas xassələri nəzərdən keçirək, o cümlədən qısa və tam qeyd formaları, həmçinin sərhədlərin eni, üslubu, rəngi və yuvarlaq künclərini təyin etmək üçün xassələr.
Əsas parametrlər
Sərhədin əsas parametrlərini ayrı-ayrı xassələrdən istifadə edərək təyin etmək olar: border-width, border-style və border-color.
Sintaksis:
element {
border-width: width;
border-style: style;
border-color: color;
}
İstifadə nümunəsi:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Qısa qeyd
border xassəsi sərhədin bütün əsas parametrlərini (eni, üslubu və rəngi) bir sətirdə təyin etməyə imkan verir.
Sintaksis:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Qısa qeyd</div>
<div class="border-full">Tam qeyd</div>
</body>
8.2 Çərçivə eni: border-width
border-width xassəsi çərçivə enini təyin edir. Qiymətlər piksel (px), nöqtə (pt), faiz (%) və ya açar sözlər (thin, medium, thick) şəklində təyin edilə bilər.
Sintaksis:
element {
border-width: width;
}
Nümunə:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Nazik çərçivə</div>
<div class="border-medium">Orta çərçivə</div>
<div class="border-thick">Qalın çərçivə</div>
<div class="border-custom">5px eni olan çərçivə</div>
</body>
8.3 Çərçivə üslubu: border-style
Təsvir:
border-style xüsusiyyəti çərçivənin üslubunu müəyyən edir. Üslub variantlarına daxildir:
none: çərçivə yoxdursolid: bütöv xəttdotted: nöqtəli xəttdashed: qırıq xəttdouble: ikiqat xəttgroove: oyma çərçivəridge: çıxıntılı çərçivəinset: basılmış çərçivəoutset: qabarıq çərçivə
Sintaksis:
element {
border-style: style;
}
Nümunə:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Çərçivə yoxdur</div>
<div class="border-solid">Bütöv xətt</div>
<div class="border-dotted">Nöqtəli xətt</div>
<div class="border-dashed">Qırıq xətt</div>
<div class="border-double">İkiqat xətt</div>
<div class="border-groove">Oyma</div>
<div class="border-ridge">Çıxıntı</div>
<div class="border-inset">Basılmış çərçivə</div>
<div class="border-outset">Qabarıq çərçivə</div>
</body>
8.4 Çərçivənin rəngi: border-color
border-color properti çərçivənin rəngini təyin edir. Rəng müxtəlif formatlarda göstərilə bilər: rənglərin adları, onaltılıq kodlar, RGB, RGBA, HSL, HSLA.
Sintaksis:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Qırmızı çərçivə</div>
<div class="border-blue">Mavi çərçivə</div>
<div class="border-green">Yaşıl çərçivə</div>
<div class="border-rgba">Yarı şəffaf qırmızı çərçivə</div>
</body>
8.5 Dairəvi künclər border-radius ilə
border-radius xüsusiyyəti elementlərin künclərini yuvarlaqlaşdırmağa imkan verir, dairəvi çərçivələr yaradır. Bu, eyni anda bütün dörd küncə və ya hər bir küncə ayrılıqda tətbiq edilə bilər.
Sintaksis:
element {
border-radius: radius;
}
Qiymətlər:
- Tək qiymət: məsələn,
border-radius: 10px;— bütün künclərə eyni radius tətbiq edir - İki qiymət: məsələn,
border-radius: 10px 20px;— birinci qiymət sol yuxarı və sağ aşağı künclər üçündür, ikinci qiymət - sağ yuxarı və sol aşağı künclər üçündür - Dörd qiymət: məsələn,
border-radius: 10px 20px 30px 40px;— soldan yuxarı, sağdan yuxarı, sağdan aşağı və soldan aşağı künclər üçün radiuslar təyin edir - Qarışıq qiymətlər: radiusları faizlə vermək olar, bu elementin ölçüsünə uyğun dairəviləşmə təmin edir
Nümunə:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Bütün künclərin dairəviləşdirilməsi</div>
<div class="radius-top">Yuxarı künclərin dairəviləşdirilməsi</div>
<div class="radius-bottom">Aşağı künclərin dairəviləşdirilməsi</div>
<div class="radius-mixed">Qarışıq künc dairəviləşdirilməsi</div>
</body>
.radius-all: bütün künclərə eyni radius (15px) tətbiq edir.radius-top: yalnız yuxarı künclərə (20px) dairəviləşdirmə tətbiq edir.radius-bottom: yalnız aşağı künclərə (25px) dairəviləşdirmə tətbiq edir.radius-mixed: hər bir küncə fərqli radius təyin edir
GO TO FULL VERSION