Border Radius генераторы

Алдын ала қарау терезесінің әр бұрышын пішіндеу үшін жүгірткілерді сүйреп, алынған border-radius CSS кодын көшіріңіз. Қарапайым дөңгеленген тіктөртбұрыш үшін төрт бұрышты бірге құлыптаңыз немесе таблетка пішінді, жапырақ пішінді және асимметриялы блоб пішіндерін жасау үшін оларды ашыңыз.

Бұл құрал не істейді?

border-radius — элементтің бұрыштарын дөңгелететін CSS қасиеті. Қолмен жазғанда ол белгіленген ретпен төрт мән алады — жоғарғы сол жақ, жоғарғы оң жақ, төменгі оң жақ, төменгі сол жақ — мұны шатастыру оңай, әсіресе төрт бұрыш әртүрлі болғанда.

Бұл құрал болжамдауды жояды: жүгірткіні жылжытыңыз, бұрыштың тікелей алдын ала қарауда дөңгеленуін бақылаңыз және жасалған код терезесінен дәл CSS кодын оқыңыз. Бір құлыптау ауыстырғышы біркелкі радиус (барлық төрт бұрыш бірдей, ең жиі кездесетін жағдай) мен органикалық, асимметриялы пішіндер үшін төрт тәуелсіз жүгірткінің арасында ауысады.

Оны неге пайдалану керек?

Тікелей алдын ала қарау сүйреу кезінде бірден жаңарады — нәтижені көру үшін CSS-ті түзетудің және жаңартудың қажеті жоқ.
Жиі кездесетін 'әрбір бұрышта бірдей радиус' жағдайы үшін бір рет басу арқылы құлыптау; таблетка пішінді түймелер, сөйлеу көпіршіктері және блоб пішіндері үшін ашыңыз.
Барлық бұрыштар сәйкес келгенде қысқартылған бір мәнді пішінді немесе сәйкес келмегенде толық төрт мәнді пішінді шығарады — екі жағдайда да көшіріп-қоюға дайын.
Толығымен браузеріңізде жұмыс істейді. Сіз енгізген ешнәрсе ешқайда жіберілмейді.
Тегін, тіркеусіз, мобильді құрылғыларда жұмыс істейді.

Оны қалай пайдалану керек

'Барлық бұрыштарды құлыптау' белгісін қойылған күйінде қалдырып, бүкіл терезе үшін біркелкі радиус орнату үшін кез келген жүгірткіні сүйреңіз.
Әр бұрышты тәуелсіз басқару үшін құлыпты алып тастаңыз — бұл таблетка пішінді, тамшы пішінді және асимметриялы карталар үшін пайдалы.
Әр жүгірткіні реттеген сайын алдын ала қарау терезесінің тікелей жаңаруын бақылаңыз.
Код терезесінен жасалған CSS кодын көшіріп, стиль кестеңізге қойыңыз.

Мысал

Енгізу

Жоғарғы сол жақ: 40px, жоғарғы оң жақ: 8px, төменгі оң жақ: 40px, төменгі сол жақ: 8px

Нәтиже

border-radius: 40px 8px 40px 8px;

Осылайша сәйкес келмейтін қарама-қарсы бұрыштар жапырақ немесе күлте силуэтін жасайды — бұл карталар мен белгішелерді жобалауда жиі кездесетін әсер.

px немесе % — қай өлшем бірлігін пайдалану керек?

Бұл генератор пиксель мәндерін шығарады, бұл көптеген пайдаланушы интерфейсі жұмыстары үшін дұрыс әдепкі таңдау болып табылады: түймелер, карталар және енгізу өрістері, мұнда сізге элементтің өлшеміне қарамастан тұрақты, болжамды бұрыш радиусы қажет.

Пайыздар басқаша әрекет етеді — олар элементтің өз ені мен биіктігіне қатысты, сондықтан шаршы элементтегі 50% радиус тамаша шеңбер жасайды, ал шаршы емес элементте эллипс жасайды. Егер сізге осы әсер қажет болса (аватарлар, контейнермен бірге масштабталатын блоб пішіндері), жасалған CSS кодын алып, px мәндерін қолмен % мәніне ауыстырыңыз — мысалы, border-radius: 50% кез келген шаршы терезені шеңберге айналдырады.

Жиі кездесетін border-radius үлгілері

Дөңгеленген карта: барлық бұрыштар бірдей, интерфейс компоненттері үшін шамамен 8–16px.
Таблетка пішінді түйме: радиусты элемент биіктігінің жартысына орнатыңыз (немесе жай ғана биіктікке қарамастан толық таблеткаға автоматты түрде шектелетін 9999px пайдаланыңыз).
Дөңгелек аватар: шаршы элементте (ені мен биіктігі бірдей) border-radius: 50%.
Сөйлеу көпіршігі: үш бұрыш дөңгеленген, бір бұрыш өткір — үш жүгірткіні жоғары, бірін 0-ге орнатыңыз.
Жапырақ/күлте пішіні: қарама-қарсы бұрыштар сәйкес келеді, көрші бұрыштар әртүрлі — мысалы, жоғарғы сол жақ пен төменгі оң жақ екеуі де үлкен, жоғарғы оң жақ пен төменгі сол жақ екеуі де кіші.

Көлеңкемен біріктіру

Дөңгеленген бұрыштар сирек жалғыз пайда болады — карталар мен түймелерге әдетте тереңдік үшін де сәл көлеңке қажет. Түсіретін көлеңкені баптау үшін Box Shadow генераторын пайдаланыңыз және жасалған CSS-тің екі бөлігін де сол элементке қолданыңыз.

→ Box Shadow генераторы

Жиі қойылатын сұрақтар

border-radius пен бұрыштар реті арасындағы айырмашылық қандай?

CSS қысқартуы әрқашан жоғарғы сол жақтан бастап сағат тілі бойымен жоғарғы сол жақ, жоғарғы оң жақ, төменгі оң жақ, төменгі сол жақ ретін ұстанады. Бұл құралдың төрт жүгірткісі осыған сәйкес белгіленген, сондықтан ретті өзіңіз есте сақтаудың қажеті жоқ.

Әр бұрыш үшін әртүрлі өлшем бірліктерін пайдалана аламын ба?

Иә, нақты CSS-те px, %, em және rem бұрыштар арасында араластыруға болады, дегенмен бұл іс жүзінде сирек кездеседі. Бұл құрал қарапайымдылық үшін біркелкі px мәндерін жасайды — араласқан бірліктер қажет болса, кез келген жеке мәнді стиль кестеңізде тікелей % немесе басқа бірлікке ауыстырыңыз.

Неге border-radius: 50% кейде шеңбердің орнына сопақша жасайды?

Себебі пайыздар әрбір оське тәуелсіз қатысты болады — көлденең радиус элемент енінің пайызы, тік радиус оның биіктігінің пайызы болып табылады. Шаршы элементте (ені мен биіктігі бірдей) бұл тамаша шеңбер жасайды; тіктөртбұрышта эллипс жасайды.

border-radius фондық суреттер мен жиектерде де жұмыс істей ме?

Иә — border-radix элементтің фонын, жиегін және (заманауи браузерлерде) оның box-shadow-ын дөңгеленген пішінге дейін қиып тастайды. Ол ата-анада да overflow: hidden орнатпасаңыз, асып кететін еншілес мазмұнды қиып алмайды.

Радиустың қаншалықты үлкен болатынына шектеу бар ма?

Қатаң шектеу жоқ — егер радиус элементтің ені немесе биіктігінің жартысынан асып кетсе, браузерлер оны сол жақтағы екі қисық дәл ортасында түйісетіндей етіп шектейді, осылайша шаршы тамаша шеңберге немесе таблетка пішініне айналады.

Таблетка пішінін немесе тамаша шеңберді қалай жасауға болады?

Таблетка (капсула) пішіні үшін радиусты кемінде элемент биіктігінің жартысына орнатыңыз — жиі қолданылатын тәсіл border-radius: 9999px, ол кез келген биіктікте жұмыс істейді, себебі браузер қисықты автоматты түрде шектейді. Тамаша шеңберге екі нәрсе қажет: бірдей ені мен биіктігі, оған қоса border-radius: 50%.