CSS yumaloq burchaklar
CSS yumaloq burchaklari
CSS border-radius xossasi elementlar uchun yumaloq burchaklar yaratish uchun ishlatiladi.
CSS border-radius xossasi
border-radius xossasi element burchaklarining radiusini belgilaydi.
Ushbu xossa background-color, chegara (border) yoki background-image mavjud barcha elementlarga qo‘llanilishi mumkin.
Mana uchta misol:
1. Fon rangi ega element uchun yumaloq burchaklar:
Rounded corners!
2. Chegara ega element uchun yumaloq burchaklar:
Rounded corners!
3. Fon rasmi ega element uchun yumaloq burchaklar:
Rounded corners!
Mana kod:
Misol
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background-image: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
O‘zingiz sinab ko‘ring »
Maslahat: border-radius xossasi aslida border-top-left-radius, border-top-right-radius, border-bottom-right-radius va border-bottom-left-radius xossalarining qisqartmasidir.
CSS border-radius — Har bir burchakni belgilash
border-radius xossasi bir to‘rttagacha qiymatga ega bo‘lishi mumkin. Mana qoidalari:
To‘rtta qiymat — border-radius: 15px 50px 30px 5px; (birinchi qiymat chap-yuqori burchakka, ikkinchi qiymat o‘ng-yuqori burchakka, uchinchi qiymat o‘ng-pastki burchakka va to‘rtinchi qiymat chap-pastki burchakka qo‘llanadi):
Uchta qiymat — border-radius: 15px 50px 30px; (birinchi qiymat chap-yuqori burchakka, ikkinchi qiymat o‘ng-yuqori va chap-pastki burchaklarga, uchinchi qiymat o‘ng-pastki burchakka qo‘llanadi):
Ikkita qiymat — border-radius: 15px 50px; (birinchi qiymat chap-yuqori va o‘ng-pastki burchaklarga, ikkinchi qiymat o‘ng-yuqori va chap-pastki burchaklarga qo‘llanadi):
Bitta qiymat — border-radius: 15px; (qiymat barcha to‘rt burchakka qo‘llanadi, ular teng yumaloqlanadi:
Mana kod:
Misol
#div1 {
border-radius: 15px 50px 30px 5px; /* four values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px; /*
three values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px; /* two values */
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px; /* one value */
background: #04AA6D;
width: 200px;
height: 150px;
}
O‘zingiz sinab ko‘ring »
CSS ellips va doira shakllari
Ellips burchaklar yaratish uchun har bir radius uchun qiyshiq chiziq / bilan ajratilgan ikkita qiymat ko‘rsatish kerak. Birinchi qiymat gorizontal radiusni, ikkinchi qiymat vertikal radiusni belgilaydi.
Tuxumsimon shakl (to‘g‘ri burchakli element uchun) yoki doira shakl (kvadrat element uchun) yaratish uchun border-radius ni 50% ga belgilang.
Misol
Ellips, tuxumsimon va doira shakllarini yaratish:
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background:
#04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}
O‘zingiz sinab ko‘ring »
CSS yumaloq burchaklar xossalari
| Xususiyat | Tavsif |
|---|---|
| border-radius | Barcha to‘rtta border-*-*-radius xossalarini belgilash uchun qisqartma xossa |
| border-top-left-radius | Yuqori chap burchak chegarasining shaklini belgilaydi |
| border-top-right-radius | Yuqori o‘ng burchakning chegarasi shaklini belgilaydi |
| border-bottom-right-radius | Pastki o‘ng burchakning chegarasi shaklini belgilaydi |
| border-bottom-left-radius | Pastki chap burchak chegarasining shaklini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!