Hər kəs veb-sayt dizaynında ənənəvi düzbucaqlı künclərdən çoxdan bezmişdir. Dairəvi künclər dəbdədir, şəkillərdən istifadə edilmir, lakin sərhəd radius xüsusiyyətindən istifadə edilən üslublar vasitəsilə hazırlanır. Bu əmlak bütün künclərin və ya hər birinin radiusunu müəyyən edən boşluqla ayrılmış bir, iki, üç və ya dörd dəyərə malik ola bilər.

Cədvəldə 1 verilir müxtəlif miqdarlar dəyərlər və bu halda əldə edilən blokun növü.

Kod	Təsvir	Baxın
div (sərhəd radiusu: 10px; )	Bir anda bütün künclər üçün yuvarlaqlaşdırma radiusu.
div (sərhəd radiusu: 0 10px; )	Birinci dəyər yuxarı sol və aşağı sağ künclərin radiusunu, ikinci dəyər yuxarı sağ və aşağı sol künclərin radiusunu təyin edir.
div (sərhəd radiusu: 20px 10px 0; )	Birinci dəyər yuxarı sol küncün radiusunu təyin edir, ikincisi - həm yuxarı sağ, həm də aşağı sol, üçüncü dəyər - aşağı sağ.
div (sərhəd radiusu: 20px 10px 5px 0; )	Yuxarı sol, yuxarı sağ, aşağı sağ və aşağı sol künclərin radiusunu ardıcıl olaraq təyin edir.

Misal 1, yuvarlaq küncləri olan bir blokun necə yaradılacağını göstərir.

Nümunə 1. Blokun küncləri

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Dəyirmi küncləri olan blok

Yuvarlaqlaşdırma radiusunu elementin hündürlüyünün və eninin yarısından çox olaraq təyin etsəniz, maraqlı effekt əldə edilə bilər. Bu vəziyyətdə bir dairə alacaqsınız. Nümunə 2 şəkil ilə dəyirmi düymənin necə yaradılacağını göstərir.

Misal 2: Dairəvi düymə

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.

düyü. 2. Dairəvi düymə

IN Opera brauzeri yuvarlaqlaşdırma sərhəd xassəsi vasitəsilə sərhəd göstərilmədikdə səhv tətbiq edilir.

Sərhəd-radius xüsusiyyəti digər xüsusiyyətlərlə birləşdirilə bilər, məsələn, elementə kölgə əlavə etmək. Misal 3-də dairələr dəsti hazırlanmışdır, onlardan biri qutu-kölgə istifadə edərək vurğulanır. Bu dəst səhifələr və ya fotoşəkillər arasında gəzmək üçün istifadə edilə bilər.

Misal 3. Parıltı

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 3.

düyü. 3. Dairə ətrafında parıldamaq

İLƏ sərhəd radiusundan istifadə etməklə Yalnız bir dairə deyil, həm də bir ellips, eləcə də bir blokda elliptik yuvarlaqlaşdırma edə bilərsiniz. Bunun üçün bir dəyər deyil, kəsik işarəsi ilə ayrılmış iki dəyər yazmaq lazımdır. 20px/10px yazmaq o deməkdir ki, filenin üfüqi radiusu 20 piksel, şaquli radius isə 10 piksel olacaq. Nümunə 4 fotoşəkilə komiks üslubunda başlıq əlavə etmək üçün elliptik künclərin necə yaradılacağını göstərir.

Misal 4: Ellipslər

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Sən öz müəlliminsən

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 4.

düyü. 4. Elliptik künclərdən istifadə etməklə

Siz həmçinin, Misal 5-də göstərildiyi kimi img seçicisinə border-radius xassəsini əlavə etməklə şəkillərin künclərinin görünüşünü dəyişə bilərsiniz.

Misal 5: Şəkillər

HTML5 CSS3 IE 9+ Cr Op Sa Fx

CSS3 çərçivə imkan verən xassələrlə element sərhədlərini formatlaşdırmaq qabiliyyətini tamamlayır küncləri yuvarlaqlaşdırın element və həmçinin istifadə edin Şəkillər elementin sərhədlərini tərtib etmək.

Dairəvi künclər və şəkil çərçivələri

1. Haşiyə-radius ilə künclərin yuvarlaqlaşdırılması

Brauzer dəstəyi

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -vebkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android brauzeri: 4.1
Chrome Android üçün: 44

Mülk kiçik hərflərin künclərini yuvarlaqlaşdırmağa imkan verir blok elementləri. Hər bir bucaq üçün əyri onun formasını təyin edən bir və ya iki radiusdan istifadə etməklə müəyyən edilir - dairə və ya ellips. Radius bütün fon üçün tətbiq edilir, hətta elementin sərhədi olmasa belə, sekantın dəqiq mövqeyi background-clip xassəsindən istifadə etməklə müəyyən edilir.

Sərhəd-radius xüsusiyyəti bütün küncləri bir anda yuvarlaqlaşdırmağa imkan verir və sərhəd-yuxarı-sol-radius , sərhəd-yuxarı-sağ-radius , sərhəd-aşağı-sağ-radius , sərhəd-aşağı-sol-radius xüsusiyyətlərindən istifadə edərək hər küncü ayrıca yuvarlaqlaşdıra bilər.

Sərhəd-radius xüsusiyyəti üçün iki dəyər təyin etsəniz, birinci dəyər yuvarlaqlaşdırılacaq yuxarı sol Və aşağı sağ künc, ikincisi isə - yuxarı sağ Və aşağı sol.

Dəyərlər vasitəsilə müəyyən edilir / müəyyən edilir üfüqi Və şaquli radiuslar. Əmlak miras qalmır.

Seçimlər

Div (en: 100px; hündürlük: 100px; haşiyə: 5px bərk;).r1 (sərhəd radiusu: 0 0 20px 20px;).r2 (sərhəd radiusu: 0 10px 20px;).r3 (sərhəd radiusu: 10px 20px ; ;) .r4 (sərhəd radiusu: 10px/20px;) .r5 (sərhəd radiusu: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (sərhəd radiusu: 10px 20px 30px 40px.0r ( haşiyə-radius: 50%;).r8 (sərhəd-yuxarı: heç biri; haşiyə-alt: heç biri; sərhəd-radius: 30px/90px;).r9 (sərhəd-aşağı-sol-radius: 100px;).r10 ( sərhəd -radius: 0 100%;).r11 (sərhəd-radius: 0 50% 50% 50%;).r12 (sərhəd-yuxarı-sol-radius: 100% 20px; sərhəd-aşağı-sağ-radius: 100% 20px ;)
düyü. 1. Nümunələr müxtəlif variantlar blokların künclərini yuvarlaqlaşdırmaq

2. Sərhəd-şəkil

Brauzer dəstəyi

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Chrome: 16.0, 7.0 -vebkit-
Safari: 6.0, 3.0 -vebkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android brauzeri: 4.4, 4.1 -vebkit-
Android üçün Chrome: 42

Mülkiyyət sizə elementin çərçivəsi kimi şəkil təyin etməyə imkan verir. Şəkil üçün əsas tələb onun simmetrik olmasıdır. Əmlak daxildir aşağıdakı dəyərlər: (sərhəd-şəkil: eni mənbə diliminin başlanğıcını təkrarlayın;) .

Bunun köməyi ilə sadə görüntü Bir element üçün bu çərçivələri əldə edə bilərsiniz.

/* Nümunə 1 */ div ( en: 260px; hündürlük: 100px; haşiyə tərzi: bərk; haşiyə-şəkil-en: 15px; sərhəd-şəkil-mənbə: url(border_round.png); sərhəd-şəkil dilimi: 30 ; sərhəd-image-repeat: stretch; png); sərhəd-şəkil-dilim: 30 sərhəd-şəkil-təkrar: dəyirmi);
düyü. 2. Şəkildən istifadə edərək blok sərhədlərinin layihələndirilməsi nümunəsi

A - B - C - D kəsikləri çərçivənin künclərini təşkil edir və onların arasında yerləşən dizayn hissəsi çərçivənin qalan yerini doldurur. verilmiş dəyər sərhəd-şəkil-təkrar xassələri. Künc ölçüsü (in bu misalda bu rəqəm 30) sərhəd-image-slice xassəsinin dəyərindən istifadə etməklə müəyyən edilir.

2.1. sərhəd-şəkil-en

Xüsusiyyət elementin haşiyəsi üçün təsvirin enini təyin edir. Genişlik göstərilməyibsə, standart olaraq 1-dir.

sərhəd-şəkil-en
Dəyərlər:
uzunluq	Uzunluq vahidlərində sərhəd genişliyini təyin edir - px / em . Bir anda birdən dördə qədər dəyər təyin edə bilərsiniz. Bir dəyər göstərilibsə, o zaman çərçivənin bütün tərəflərinin eni eynidır, iki dəyər yuxarı-aşağı və sağ-solun genişliyini və s.
nömrə	Haşiyə eni dəyərinin vurulduğu rəqəmsal dəyər.
%	Elementin haşiyəsinin eni təsvirin ölçüsünə nisbətən hesablanır. Eninə nisbətən üfüqi, şaquli - hündürlüyə nisbətən.
avto	Sərhəd-şəkil-dilim dəyərinə uyğundur.
ilkin
miras almaq

Sintaksis

Div (sərhəd-şəklin eni: 30px;) Şek. 3. İstifadə edərək şəkil çərçivəsinin enini təyin etmək nümunəsi müxtəlif növlər dəyərlər

2.2. sərhəd-şəkil-mənbə

Mülk blokun sərhədlərini bəzəmək üçün istifadə ediləcək təsvirə gedən yolu müəyyən edir.

Sintaksis

Div (sərhəd-şəkil-mənbə: url(border.png);)

2.3. sərhəd-şəkil-dilim elementləri

Xüsusiyyət elementin sərhədlərini təyin etmək üçün istifadə olunan şəkil hissələrinin ölçüsünü müəyyən edir və təsviri doqquz hissəyə bölür: dörd künc, künclər arasında dörd kənar və mərkəzi hissə.

Dəyərlər:
nömrə	Çərçivə hissələrinin ölçüsü bir, iki, üç və ya dörd dəyərdən istifadə etməklə təyin edilə bilər. Bir dəyər elementin hər tərəfində sərhədləri eyni ölçüdə təyin edir. İki dəyər: birincisi üst və ölçüsünü müəyyən edir aşağı hədd, ikinci - sağ və sol. Üç dəyər: birincisi yuxarı haşiyənin ölçüsünü, ikincisi - sağ və sol, üçüncüsü isə alt sərhədi müəyyənləşdirir. Dörd dəyər: Üst, sağ, aşağı və sol haşiyələrin ölçülərini müəyyən edir. Rəqəmsal dəyər px sayını göstərir.
%	Sərhəd ölçüləri şəkil ölçüsünə nisbətən hesablanır. Eninə nisbətən üfüqi, şaquli - hündürlüyə nisbətən.
doldurmaq	Dəyər rəqəm və ya faizlə birlikdə göstərilir. Müəyyən edilərsə, şəkil çərçivənin daxili kənarı ilə kəsilmir, həm də çərçivənin içindəki sahəni doldurur.
ilkin	Bu xassəni defolt dəyərinə təyin edir.
miras almaq	Bu xüsusiyyətin dəyərini ana elementdən miras alır.

Sintaksis

Div (sərhəd-şəkil-dilim: 50 20;)
düyü. 4. Şəkil çərçivəsinin dilimlərinin təyin edilməsinə nümunə

2.4. sərhəd-şəkil-təkrar

Bu xüsusiyyət fon şəklinin çərçivənin küncləri arasındakı boşluğu necə doldurmasına nəzarət edir. Tək bir dəyər və ya bir cüt dəyərdən istifadə etməklə təyin edilə bilər.

Sintaksis

Div (sərhəd-şəkil-təkrar: təkrar;) Şek. 5. Müxtəlif növ qiymətlərdən istifadə edərək şəkil çərçivəsinin mərkəzi hissəsinin təkrarlanması nümunəsi

2.5. sərhəd-şəklin başlanğıcı

Xüsusiyyət təsvir çərçivəsini müəyyən bir uzunluqla elementin hüdudlarından kənara köçürməyə imkan verir. Bir və ya dörd dəyərdən istifadə etməklə müəyyən edilə bilər.

Sintaksis

Div (sərhəd-şəklin başlanğıcı: 10px;)
düyü. 6. Müxtəlif növ dəyərlərdən istifadə edərək şəkil çərçivəsinin dəyişdirilməsi nümunəsi

3. Xarici çərçivə ofset kontur-ofset

Mülk sərhəd arasındakı məsafəni təyin edir sərhəd elementi və kontur xassəsindən istifadə etməklə yaradılmış xarici haşiyə.

/*Şəkil 1:*/ img ( haşiyə: 1px bərk çəhrayı; kontur: 1px kəsikli boz; kontur-ofset: 3px; ) /*Şəkil 2:*/ img ( haşiyə eni: 1px 10px; haşiyə üslubu: bərk; sərhəd-rəng: çəhrayı kontur: 1px kəsikli boz kontur-ofset: 3px;
düyü. 7. Təsvirin xarici çərçivə ilə bəzədilməsi nümunəsi

4. Gradient çərçivə

Sərhəd-şəklin dəyəri təkcə şəkil deyil, həm də gradient dolgu ola bilər.

Şəffaf çərçivə

Şəffaf rənglərdən biridir. Beləliklə, siz elementin bütün tərəfləri üçün bir anda və ya hər tərəf üçün ayrıca sərhədlər təyin edə bilərsiniz. Haşiyənin qalınlığı sərhəd genişliyi xüsusiyyəti ilə idarə olunur.

* (box-sizing:border-box;).wrap ( hündürlük: 200px; padding: 25px; fon: #00E4F6; ) .gradient ( hündürlük: 150px; en: 50%; kənar: 0 avtomatik; haşiyə: 10px şəffaf şəffaf sərhəd-şəkil: xətti-qradiyent (sağa, şəffaf 0%, #ADF2F7 100%);

Poçt zərfi

* (box-sizing:border-box;).wrap ( hündürlük: 200px; padding: 25px; ) .gradient ( hündürlük: 150px; en: 50%; kənar: 0 avtomatik; haşiyə: 10px şəffaf; haşiyə-şəkil: 10 təkrarlanan-xətti-qradiyent(45deg, #A7CECC, #A7CECC 10px, şəffaf 10px, şəffaf 20px, #F8463F 20px, #F8463F 30px, şəffaf 30px, şəffaf 40px )

CSS-də yuvarlaqlaşdırılmış künclər bir çox yolla edilə bilər, çox və bəziləri köhnəlmiş hesab edilə bilər, çünki CSS 3 HTML elementlərinin künclərini yuvarlaqlaşdırmağa imkan verən yeni xüsusiyyətlər təqdim etdi. Lakin, birincisi, köhnə brauzerlər bu xassələri dəstəkləmir, ikincisi, bəzən dizaynerin yaradıcı beynində belə fikirlər doğulur ki, yalnız köhnə üsullar xilas edə bilər. Buna görə də, burada CSS-də dairəvi künclər yaratmaq üçün bir neçə fərqli varianta baxacağıq: ən sadədən olduqca mürəkkəbə qədər.

Bu nümunələrdə ilkin blok elementlərinin küncləri yuvarlaqlaşdırılıb və bəzi nümunələrdə bu bloklar köməkçi elementlər kimi istifadə olunur. Ancaq unutmayın ki, zərurət olduqda onları blok və ya inline-blok ilə əvvəlcədən təyin edərək, xətt səviyyəli elementlərlə asanlıqla eyni şeyi edə bilərsiniz.

CSS 3-də şəkillərsiz dairəvi künclər

Bu nümunə CSS 3 xüsusiyyətlərindən istifadə edir ki, bu da sizə şəkillərin köməyi olmadan küncləri asanlıqla yuvarlaqlaşdırmağa imkan verir.

HTML və CSS Nümunəsi: Küncləri ilə yuvarlaqlaşdırma CSS istifadə edərək 3 şəkil yoxdur

Məzmunu bloklayın.

Nümunənin təsviri

1. Küncləri yuvarlaqlaşdırmaq üçün biz bütün müasir brauzerlər tərəfindən başa düşülən CSS 3 xüsusiyyətindən istifadə edirik.
2. Köhnə Firefox, Chrome və Safari brauzerləri üçün biz əsas xüsusiyyət dəstəklənməzdən əvvəl ortaya çıxan -moz- və -webkit- prefiksləri ilə xüsusi xassələrdən istifadə edirik. Təəssüf ki, köhnə Opera və IE üçün oxşar analoqlar yoxdur. Nəzərə alın ki, mürəkkəb əyrilər yaratarkən prefiksli xüsusiyyətlər düzgün işləməyə bilər. Buna görə CSS kodunda onlar əsas əmlakdan daha yüksək siyahıya alınmışdır, buna görə də stil prioritetləri, artıq "saf" anlayan brauzerlər ondan istifadə edirdilər.

Prefiksli xüsusiyyətlər CSS spesifikasiyasında deyil, ona görə də onlardan istifadə etibarsız kodla nəticələnəcək.

CSS-də şəkillərsiz dairəvi künclər

Bu nümunədə də şəkillər yoxdur, lakin əlavə bloklardan istifadə edir. Metodun mahiyyəti ondan ibarətdir ki, əsas məzmundan əvvəl və sonra bir neçə blok göstərilir ki, onlar ondan uzaqlaşdıqca lateral xarici kənarlardan istifadə edərək eni tədricən azalır. Bunun sayəsində yuvarlaq künclərin təqlidi baş verir.

Bu üsul pisdir, çünki kod "zibillənmişdir" əlavə bloklar, lakin təəssüf ki, bir çox nümunədə belə bloklar mövcud olacaq. Başqa bir mənfi cəhət nə vaxtdır böyük radiuslar yuvarlaqlaşdırma üçün nümunədə istifadə olunandan daha çox blok əlavə etməli olacaqsınız.

HTML və CSS Nümunəsi: Şəkillərdən istifadə etmədən künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

Nümunənin təsviri

1. Sinif = "blok" olan blokun içərisində künclərin yuvarlaqlaşdırılmasını simulyasiya etmək üçün qarşısında bloklar yerləşdirdiyimiz əsas məzmun üçün bir element ("content_block") göstəririk ("b1" , "b2" , "b3" ). Bundan sonra onları eyni şəkildə qoyduq, amma tərs qaydada.
2. Künclərin görünüşünü yaratmaq üçün simulyasiya bloklarını tələb olunan hündürlük və yan kənarlara (CSS) təyin etdik. Biz həmçinin onların şrift ölçüsünü (CSS) sıfırladıq və onu :hidden olaraq təyin etdik - bu, hündürlüyü artıra və göstəriləndən daha böyük edə bilən köhnə brauzerlər üçün nəzərdə tutulub.
3. Bu nümunədə, küncləri yuvarlaqlaşdırmaqdan əlavə, çərçivənin təqlidi də əlavə edildi, əgər ehtiyacınız yoxdursa, sadəcə elementlərdən bütün "sərhədləri" çıxarın və "b3" blokundan çıxarın. fon rəngi.

CSS-də yuvarlaq künclərin görünməsinin ən asan yolu element üçün fon kimi bir şəkil istifadə etməkdir. Bu halda, elementin ölçüləri adətən fon şəklinin ölçüsü ilə eyni şəkildə göstərilir. Bu metodun mənfi cəhəti ondan ibarətdir ki, elementin məzmunu onun əhatə dairəsindən kənara çıxmamalıdır, yəni müəyyən məhdud ölçüdə olmalıdır.

HTML və CSS nümunəsi: Bir şəkil istifadə edərək künclərin yuvarlaqlaşdırılması

MENU

Nümunənin təsviri

1. CSS xassəsindən istifadə edərək, blok üçün şaquli və üfüqi (təkrarsız) təkrarlanmasını qadağan etdiyimiz fon şəklini təyin etdik. bu halda bu tələb olunmur.
2. Blokun içindəki mətnin onun kənarlarına toxunmasının qarşısını almaq üçün onun paddingini (CSS) hər tərəfdən 5px olaraq təyin etdik.
3. Sonra, bloku fon ilə eyni ölçülərə təyin etməlisiniz. Arxa fon şəklimiz 140x32 piksel ölçülərə malikdir, lakin biz blokun özünün enini (CSS) və hündürlüyünü (CSS) 10px azaldırıq. Elementi hər istiqamətdə 5px genişləndirən eyni daxili yastıqlara görə onu azaltmalı oldum.

Əvvəlki nümunədə blok ölçüsü sabit idi və fon şəklinin ölçüsündən asılı idi və bu çox əlverişsizdir. İndi blokumuzun enini ölçülə bilən hala gətirəcəyik. Bunu etmək üçün təsvirin üç hissəsini - tərəfləri və mərkəzin bir hissəsini kəsin. Sonra ilə əsas blokun içərisinə iki element qoyuruq sabit ölçülər, mütləq yerləşdirmə sayəsində yanlarına yerləşdiriləcək. Onlara fon kimi eyni yan hissələri, əsas blok üçün isə mərkəzi hissəni verək. Bu, bizə yuvarlaq küncləri və dəyişən eni olan bir blok verəcəkdir.

Bu texnika çox vaxt bağlantılar və ya bölmə/menyu başlıqları kimi tək sətirli elementləri yuvarlaqlaşdırmaq üçün istifadə olunur.

HTML və CSS Nümunəsi: SideBlocks istifadə edərək künclərin yuvarlaqlaşdırılması

Əsas məzmun.

Nümunənin təsviri

1. Blok sinfi = "blok" içərisində biz iki element yerləşdiririk - "left_bok" və "right_bok", biz onlara arxa hissələrin şəkillərini arxa plan (CSS) kimi təyin edirik və onların bərpasını qadağan edirik (təkrarsız). Əsas blokun özü üçün biz mərkəzi hissədən fon təyin edirik və onun yalnız üfüqi şəkildə təkrarlanmasına icazə veririk (təkrar-x).
2. Biz fonun ölçüsünə uyğun olan yan bloklar üçün eni təyin edirik, bu, bizim üçün 14x32 pikseldir; Ancaq əsas blok üçün, əvvəlki nümunədə olduğu kimi, şaquli dolğunluğu kompensasiya etmək üçün hündürlüyü 22px olaraq təyin etdik.
3. Yan divarlarımızı "blok"a nisbətən yerləşdirəcəyik, ona görə də müəyyən edirik: bunun üçün nisbi, yan divarların özləri üçün isə mütləq. Yaxşı, sonra CSS xüsusiyyətlərindən istifadə edərək onları valideynin müvafiq tərəflərinə sıxırıq və .
4. Blokun məzmununun yan şəkillərin altında gizlədilməsinin qarşısını almaq üçün biz “blok”u tərəflərin özlərinə bərabər və ya ondan bir qədər böyük ola bilən yan doldurma (CSS) üçün təyin etdik. Mətnin kənarlara "yapışmaması" üçün yuxarıda və aşağıda kiçik kənar boşluqlar da qoyuruq.

IE6-da bu üsulla bağlı kiçik bir səhv var:

Əgər “blokun” eni və ya hündürlüyü təkdirsə, blokun daxili kənarı ilə sağ tərəfdəki yan panel arasında xoşagəlməz 1px boşluq yaranacaq ki, bu da bütün mənzərəni korlayacaq. Bu səhv istifadə edərək düzəldilə bilər CSS hack müəyyən bir ifadə ilə, amma burada belə bir nümunə belə verməyəcəyəm, çünki o, tez-tez brauzeri dondurur və istifadə etməmək daha yaxşıdır.

Gəlin bunu fərqli edək. Gəlin "right_bok" sol kənarını (CSS) 100%-ə təyin edək ki, o, əsas blokun sağ sərhədindən kənara çıxsın və sonra onu eninə bərabər sayda piksellə sola köçürərək geri qaytaraq. IE6 bu xassələrin dəyərləri ilə düzgün işləyir, ona görə də bloku bizə lazım olan yerə yerləşdirməkdən başqa seçimi yoxdur.

Küncləri yuvarlaqlaşdırmağın bu üsulu əvvəlkinə bənzəyir, lakin ondan fərqli olaraq, burada tərəflərə yerləşdirilən HTML elementləri deyil, əsas bloka əlavə edilənlərdir. psevdo elementlər. Bu yanaşma sayəsində səhifənin lazımsız HTML kodundan xilas olmaq mümkün olub.

HTML və CSS Nümunəsi: Yan Pseudo-Elementlərdən istifadə edərək Künclərin yuvarlaqlaşdırılması

Əsas məzmun.

Nümunənin təsviri

1. CSS psevdo elementlərindən istifadə edərək, əsas blokun əvvəlinə və sonuna nəsə əlavə etmək istədiyimizi bildiririk. Və CSS xüsusiyyətindən istifadə edərək, biz sadəcə yuvarlaq künclərin, daha doğrusu tərəflərin lazımi şəkillərini əlavə edirik. Beləliklə, biz şəkillərlə iki psevdo element yaratdıq.
2. Yaxşı, onda əvvəlki nümunədəki kimi eyni şeyi edirik, yalnız yaradılmış psevdo elementlərlə işləyirik.

IE6 və IE7 üçün bu misalda aşağıdakı "dəyənəklər" istifadə edilmişdir:

1. Bildiyiniz kimi, IE6 və IE7 burada istifadə olunan psevdo elementləri başa düşmür, ona görə də aşağıdakıları edirik. Əsas elementin daxilində iki teqi birləşdirən ifadədən istifadə edirik və onlara əvvəlki nümunədəki kimi eyni üslubları veririk. Qeyd edək ki, ilk innerHTML-dən sonra gələn daxil edilmiş kod açılış "blok" teqindən dərhal sonra, ikinci innerHTML-dən sonra isə bağlanış teqindən əvvəl əlavə olunur. Bəli, bizim vəziyyətimizdə bunun əhəmiyyəti yoxdur, çünki mütləq yerləşdirmə istifadə olunur, lakin bəzən bu barədə bilmək faydalıdır.
2. Bu kodun digər brauzerlər tərəfindən görünməsinin qarşısını almaq üçün onu daxil edirik şərti şərhlər. Eyni şərhlərlə bağlanmış etiketlə bağlanmış ayrı bir CSS faylına qoysanız daha yaxşı olar.

Blok sarğıdan istifadə edərək CSS-də yuvarlaqlaşdırılmış künclər

Bu metodun mahiyyəti ondan ibarətdir ki, əvvəlcə təsvirin küncləri kəsilir. Sonra bir-birinin içərisinə daxil olan əsas blokun içərisinə daha bir neçə blok (künclərin sayına görə) yerləşdirilir. Onların hər birinə fon kimi bir şəkil küncü verilir. Şəkillərin çoxaldılması qadağandır və koordinatlar blokların künclərində yer alması üçün verilir. Dəyirmi künclərin təsiri belə əldə edilir.

HTML və CSS Nümunəsi: Block Wrap istifadə edərək künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

Nümunənin təsviri

1. Əsas blokun içərisinə daha dörd yer qoyuruq. Bu blokların heç birinin kənarları və ya haşiyələri olmadığından və yalnız ən daxili blokun girintiləri olduğundan, onların hamısı hündürlüyü və eni bərabərdir.
2. CSS xassəsindən istifadə edərək, biz daxili blokların hər birini fon kimi küncə qoyuruq, onların çoxalmasını qadağan edirik və blokların künclərində yerləşdiririk. Və elementlərin fon rəngi şəffaf olduğundan, bütün dörd fon küncü səhifədə görünür.
3. Özünüz əlavə edin xarici vahid istədiyiniz fon rənginin bir küncü ilə. Hamısı hazırdır.

Siz class="block"-da istədiyiniz xassəni göstərərək blokun enini açıq şəkildə təyin edə bilərsiniz, lakin hündürlüyü dəyişdirmək üçün ən daxili elementdən istifadə etməlisiniz (bizim üçün bu "rb").

Yerləşdirmədən istifadə edərək CSS-də yuvarlaqlaşdırılmış künclər

Burada da kiçik bloklarda göstəriləcək fon üçün künclər kəsilir. CSS mütləq yerləşdirmədən istifadə edərək, bu bloklar verilmiş əsas elementin künclərində yerləşdirilir istədiyiniz rəng fon.

HTML və CSS Nümunəsi: Yerləşdirmədən istifadə edərək künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

Nümunənin təsviri

1. Əsas elementin içərisinə (class= "blok") künc blokları kimi çıxış edəcək "corn_lt" , "corn_rt" , "corn_lb", "corn_rb" sinifləri olan dörd teq yerləşdiririk.
2. CSS xassəsindən istifadə edərək, biz öz arxa fon şəklimizi hər künc blokuna bağlayırıq və onlara bu ölçülərə bərabər ölçüdə en və hündürlük veririk. fon şəkilləri. Hər halda, şrift ölçüsünü (CSS) sıfırladıq və artıqlığı (CSS) kəsdik.
3. Əsas element üçün (CSS: nisbi) nisbi yerləşdirməni təyin edirik, çünki künc bloklarını ona nisbətən, künclərin özləri üçün isə mütləq (mütləq) yerləşdirəcəyik.
4. CSS xassələrindən istifadə edərək və , biz künc blokları üçün şaquli və üfüqi ofset məsafələrini təyin edirik ki, onlar əsas blokun künclərində yerləşsinlər.

IE6-da bu metodla bağlı bir neçə problem var:

1. Əgər "blokun" eni açıq şəkildə göstərilməyibsə, onda soldakı künclər yerinə düşməyəcək. Bunun səbəbi blokda daxili dolğunluğun olmasıdır. Problemi həll etməyin ən asan yolu boşluqları aradan qaldırmaq və "blok"un əsas məzmununu (künclər olmadan) əlavə blok sarğısına əlavə etmək və sonra sarğıda lazımi boşluqları təyin etməkdir. Amma mən burada IE6-a elementi öz təbii ölçüsündə göstərməyi əmr edən böyütmə:1 xüsusiyyətindən istifadə edərək tərtibatı aktivləşdirməklə bunu fərqli etdim. Bu xüsusiyyət etibarsızdır, ona görə də ondan istifadə etmək qərarına gəlsəniz, əlaqəni vasitəsilə etməyi məsləhət görürəm şərti şərhlər.
2. Yuxarıda müzakirə edilən eyni bir piksel səhv. Ancaq burada boşluqlar yalnız sağ künclər və arasında yarana bilər sağ tərəf blok, həm də aşağıda. Sağdakı boşluqlardan qurtulsaq, bu, aşağı olanlarla işləməyəcək. Həll əsas elementin bərabər enini və hündürlüyünü açıq şəkildə təyin etməkdir. Siz həmçinin tək dəyərlər təyin edə bilərsiniz, lakin sonra aşağı və sağa ofset məsafələrini sıfır deyil, -1px olaraq təyin etməlisiniz.

Əslində, CSS-də künclərin yuvarlaqlaşdırılmasının bu metodu texnologiyası əvvəlki ilə eynidir, ona görə də burada ətraflı şərhlər buraxılmayacaq. Yeganə fərq odur ki, burada ayrı-ayrı fon künc şəkilləri əvəzinə bir ümumi sprite təsvirindən istifadə olunur. Bunun sayəsində sayt daha sürətli yüklənir, çünki bir şəkil dörddən az "çəkisi" və hostinq dörd əvəzinə bir müraciət var.

Sprite veb sayt elementləri üçün fon kimi istifadə olunan bir neçə şəkli birləşdirən bir şəkildir. Sprite hansı hissəsinin konkret HTML elementinin fonu olacağı xüsusi CSS xassəsində göstərilən koordinatlardan asılıdır.

HTML və CSS Nümunəsi: Yerləşdirmə və Spritelərdən istifadə edərək künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

Nümunənin təsviri

1. CSS xüsusiyyətindən istifadə edərək, 22x22 piksel (hər dörddəbir künc üçün 11x11 piksel) ölçüləri olan dəyirmi formaya malik olan künc bloklarına fon sprite şəklini bağlayırıq.
2. CSS xassəsindən istifadə edərək, fon ofset koordinatlarını təyin edirik. Məsələn, -11px 0 dəyəri fonun X oxunda 11px ilə sola ofset ediləcəyini, lakin Y oxunda ofset olunmayacağını bildirir. Beləliklə, spritin sol yarısı elementin sərhədindən kənara çıxır və yalnız sağ qalır. Lakin o, yalnız yarısı görünür, çünki hündürlüyü 22px, künc blokunun özünün hündürlüyü isə cəmi 11px-dir. Belə çıxır ki, nə vaxt verilmiş dəyər Elementin fonu spritin yuxarı sağ rübü olacaq.

IE6 ilə əvvəlki nümunədə olduğu kimi eyni problemlər var.

Bu nümunədə biz haşiyəsi olan elementin künclərini yuvarlaqlaşdıracağıq, lakin bu, bu xüsusi metodun spesifik xüsusiyyəti deyil - əvvəlki nümunələrdə asanlıqla haşiyə ilə yuvarlaqlaşdırmadan istifadə edə bilərsiniz.

Əsas blokdan yaradılmış psevdo-elementlərdən istifadə edərək, lakin onlara yerləşdirmə tətbiq etmədən yuvarlaqlaşdırmaları özləri edəcəyik.

Və bir an. Əvvəlki nümunələrdə künclər içəridəki fonla birlikdə kəsilmişdir və bu, həmişə lazım deyil, xüsusən də yuvarlaq küncləri olan blokun fonunun qeyri-bərabər olacağı gözlənilirsə. Buna görə də, burada çərçivənin içərisindəki fon şəffaflaşdırıldı (bu, imkan verir PNG formatı) və küncləri kəsiləndə onların içi də şəffaf oldu. Lazım gələrsə, əvvəlki nümunələrdə də oxşar yanaşmadan istifadə edə bilərsiniz.

HTML və CSS Nümunəsi: Pseudo-Elementlərdən istifadə edərək künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

fon və onun köməyi ilə onları yerləşdiririk sağ tərəf və biz “çoxalmanı” qadağan edirik. Budur, künclər hazırdır.

“Blok” (CSS) üçün padding təyin etdiyimiz üçün psevdo elementlər və buna görə də künclər blokun künclərində deyil, kənarlardan 15px uzaqda yerləşir. Bunu düzəltmək üçün psevdo elementlərə mənfi kənarları (CSS) lazımi tərəflərə veririk ki, onları girintilərin üstündə yerləşdirsinlər. Lakin biz kənarları 15 yox, 17px bərabər edirik, bu, eni 2px (15+2=17) olan çərçivəni (CSS) örtmək üçün lazımdır. İndi bu qədər.

IE6 və IE7 üçün biz burada HTML kodunun yeridilməsi ilə artıq tanış olan "köpək qoltuqlarından" istifadə etdik, çünki bu brauzerlər burada istifadə olunan psevdo elementləri başa düşmürlər:

1. İfadədən istifadə edərək, biz iki teqi əsas elementin içərisinə inteqrasiya edirik, onları da bloklara çeviririk. Sonra onlara bir etiket qoyuruq. Və sonra bu teqlər psevdo elementlərlə eyni xüsusiyyətlərə malikdir. Yeganə odur ki, biz əlavə olaraq CSS xüsusiyyətini əlavə edirik :relative, onsuz çərçivə küncləri üst-üstə düşür.

Bu metodun dezavantajı, yuvarlaq küncləri olan bir blokun hündürlüyünü açıq şəkildə təyin edə bilməməyinizdir, çünki məzmunun ölçüsünü aşarsa, aşağı künclər kənarlara basılmayacaq. Əgər siz hələ də əsas məzmunu başqa bloka əlavə edib hündürlüyünü təyin etsəniz, bunun qarşısını almaq olar.

Pseudo-elementlərlə və əlavə bloklar olmadan künclərin yuvarlaqlaşdırılmasının başqa bir nümunəsi

Bu nümunə əvvəlkinə bənzəyir, lakin burada biz psevdo elementləri tənzimləmək üçün yerləşdirmədən istifadə edirik. Bu yanaşma sayəsində yuvarlaq küncləri olan bir blokun hündürlüyünü açıq şəkildə təyin etmək mümkün oldu.

HTML və CSS nümunəsi: Blokun hündürlüyünü dəyişə biləcəyiniz künclərin yuvarlaqlaşdırılması

Məzmunu bloklayın.

Və yenə IE6 və IE7 üçün bir neçə əlavə edirik əlavə elementlər ifadədən istifadə etmək və şərti şərhlərdə kodu bağlamaq. Yalnız bu dəfə biz psevdo elementləri təqlid etməyə belə cəhd etməyəcəyik, lakin bunu daha sadə edəcəyik.

1. "Blok"un içərisinə dörd etiket əlavə edirik və onlara yerləşdirmə tətbiq edirik. Və sonra biz sadəcə olaraq onlara şəkil künclərini fon kimi göstəririk və onları əsas elementin künclərinə yerləşdiririk. Yəni, yuxarıda müzakirə edilən üsullardan birində olduğu kimi hərəkət edirik.
2. Bir piksellik səhvdən (yuxarıda bir neçə dəfə qeyd olundu) xilas olmaq üçün sağ künc elementlərinə 100% dəyər və mənfi ofset -9px olan sol kənar (CSS) əlavə edin. Ümumiyyətlə, xatırlayırsınızsa, bu ofset künc blokunun eninə bərabər olmalıdır (bizim üçün bu 11px), lakin buradakı 2px haşiyəni unutma - küncləri onun üstünə qoymalıyıq. (11px-2px=9px).

Yeri gəlmişkən, əslində, əvvəlki misalda etdiyimiz kimi, psevdo elementləri təqlid etmək daha asan olardı - bu yolla əlavə kod daha az olardı. Lakin IE6-da deyil, bu brauzerə daha bir neçə “dəyənək” lazımdır və nəticədə iki ayrı-ayrılıqda yazmalı olacaq. şərti şərhlər- IE6 və IE7 üçün və bu yalnız kodu şişirdəcək...

Firefox-da bu üsul 3.6-dan, Opera-da isə 10.0-dan düzgün işləyir, mən onlar üçün qoltuqağacı tapmadım, çünki bunun əhəmiyyəti azdır.

Əvvəlki dərsdə element üçün haşiyəni necə təyin etməyi öyrəndik. Haşiyə rəngi və haşiyə üslubu kimi xassələrə də baxdıq, haşiyənin rəngini və üslubunu fərdiləşdirə bilərsiniz. Bununla belə, bütün çərçivələrimiz düzgün açılarla çıxdı. İndi biz sizə sərhədlər üçün CSS-də yuvarlaq künclərin necə yaradılacağını göstərəcəyik.

Küncləri necə yuvarlaqlaşdırmaq olar: CSS3 sərhəd-radius Mülkiyyəti

CSS-də künclərin yuvarlaqlaşdırılması HTML səhifəsində istənilən element üçün edilə bilər. Bunun üçün ona uyğun qiymətlə border-radius xassəsini tətbiq etmək lazımdır. Çox vaxt dəyər piksellərlə göstərilir, lakin em və ya faiz kimi digər vahidlərdən də istifadə edilə bilər (sonuncu halda hesablama blokun eninə nisbətən aparılır).

Effekt bu əmlakın yalnız üslubda olan element rəngli fon və/və ya haşiyəyə malik olduqda nəzərə çarpacaq. Misal üçün:

BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 25px; )

Yuxarıda təsvir edilən üslub elementdə aşağıdakı nəticəni verəcəkdir

ölçüsü 200x200 piksel:

Siz həmçinin elementin yalnız yuxarı və ya aşağı küncləri üçün yuvarlaq kənarlar düzəldə bilərsiniz və ya hər küncə fərqli yuvarlaqlaşdırma radiusu verə bilərsiniz - təxəyyül üçün çoxlu yer! Misal:

BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 25px; ) .borderElement1 ( fon rəngi: #FFE8DB; haşiyə: 6px bərk #FF5A00; haşiyə radiusu: 15px 100px 15px 100px;)

Ancaq bu hamısı deyil: sadə yuvarlaq künclər əvəzinə elliptik yuvarlaqlaşdırma təyin edə bilərsiniz. Bunu etmək üçün, kəsiklə ayrılmış iki dəyər göstərməlisiniz (ellipsin üfüqi və şaquli yarım oxları üçün). 150x450 piksellik bloka misal verək:

BorderElement (fon rəngi: #EEDDFF; haşiyə: 6px bərk #7922CC; haşiyə radiusu: 280px/100px; )

Siz dəyərləri qarışdıra bilərsiniz (yəni eyni üslubda həm müntəzəm, həm də eliptik dairəvi istifadə edin) və müvafiq xüsusiyyətlərdən istifadə edərək hər künc üçün şəxsi üslub əlavə edə bilərsiniz:

• border-top-left-radius - yuxarı sol künc üçün;
• sərhəd-yuxarı-sağ-radius - yuxarı sağ künc üçün;
• border-bottom-left-radius - aşağı sol künc üçün;
• sərhəd-aşağı-sağ-radius - sağ alt künc üçün.

Künclərin yuvarlaqlaşdırılması prinsipi

Aşağıdakı şəkil künc yuvarlaqlaşdırmasının CSS-də necə hesablandığını göstərir. Beləliklə, bucaq üçün tək bir dəyər göstərilibsə - məsələn, 20px - bu, yuvarlaqlaşdırmanın 20 piksel radiuslu bir dairə boyunca baş verəcəyini bildirir. İki dəyərin kəsik işarəsi ilə ayrıldığı halda, məsələn, 30px/20px , künclər ellips boyunca yuvarlaqlaşdırılacaq. Bu vəziyyətdə birinci dəyər ellipsin üfüqi yarımoxunun uzunluğu - 30px, ikinci dəyər isə şaquli yarımoxun uzunluğudur - 20px:

Əmlak CSS sərhəd radiusu hamı tərəfindən dəstəklənir müasir versiyaları brauzerlər.