Негізгі мазмұнға өту
LibraTool logoLibraTool

CSS border-radius генераторы — тегін

Әр бұрышты тәуелсіз басқарумен дөңгелектелген бұрыштарды визуалды жобалаңыз. Органикалық blob пішіндері үшін эллиптикалық X/Y синтаксисін қолдайды.

Жүктелгеннен кейін офлайн жұмыс істейді
border-radius: 20px 20px 20px 20px;
Өлшем

Жиі қолданылуы

  • Органикалық Blob ПішіндеріБатыс бөлімдері және суреттемелер үшін ерекше blob пішіндерін құру үшін эллиптикалық X/Y синтаксисін пайдаланыңыз.
  • Карталар және Контейнер БұрыштарыҚазіргі заманғы UI дизайнында карталар, контейнерлер және панельдер үшін стандартты дөңгелектелген бұрыштар.
  • Аватар және Профиль СуреттеріПрофиль суреттері үшін дұрыс бұрыш стилін құрыңыз: шеңбер, squircle немесе дөңгелектелген төртбұрыш.
  • Ішектер, Тегтер және Бәйге9999 ұйғарымымен толық дөңгелектелген шағын түймелерін, тегтерін және бәйгелерін тұрғыңыз.
  • Асимметриялық Бұрыш ДизайндарыБөлектейтін, бренд-тануымды карта және түймелерді пішіндерін құру үшін бұрыштардың радиусын араластырыңыз.

Қалай жұмыс істейді

Жиек радиусы генераторы толығымен браузерде жұмыс істейді — сервер жоқ, кітапхана жоқ, жүктеу жоқ. Ол React күйі мен useMemo пайдаланып CSS border-radius мән жолын тікелей JavaScript-те құрастырады, содан кейін оны тірі div элементінде инлайн стиль ретінде қолданады, сондықтан браузердің өз CSS қозғалтқышы пішінді нақты уақытта өңдейді.

  1. 1
    Сырғытпалар күйді жазады
    Әр ауқым кірісі сегіз сандық күй айнымалысының біріне жазады — эллипс режимі үшін төрт көлденең бұрыш радиусы және төрт тік. Біріктірілген режим барлық сегізін бір уақытта синхрондайтын setAll көмекшісі арқылы бір сырғытпаға қысады.
  2. 2
    useMemo CSS мәнін жинақтайды
    useMemo хугі кез келген бұрыш мәні, бірлік (px немесе %) немесе эллипс ауыстырғышы өзгерген сайын border-radius жолын қайта есептейді. Стандартты режимде ол төрт мәнді қысқа жазуды шығарады; эллипс қосулы кезде, ол толық сегіз мәнді синтаксис үшін көлбеу сызық бөлгішін қосады — мысалы, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Браузер CSS қозғалтқышы алдын ала қарауды өңдейді
    Есептелген жол жай div элементінде инлайн borderRadius стилі ретінде орнатылады. Барлық өңдеуді браузердің орналасу қозғалтқышы жасайды — canvas жоқ, SVG жоқ, үшінші тарап сызу коды жоқ.
  4. 4
    Буфер API шығысты көшіреді
    "Көшіру"-ді басу таңдалған формат ауыстырғышына байланысты CSS декларациясымен (border-radius: ...;) немесе баламалы Tailwind еркін мән класымен (rounded-[...]) navigator.clipboard.writeText-ті шақырады.

Байланысты құралдар

🎨

CSS box-shadow генераторы

Тірі алдын ала қарау, көп қабатты жинақтау, түс таңдағыш, кірістіру ауыстырғышы және бір рет басу арқылы көшіруді қамтитын CSS box-shadow визуалды конструкторы. Material, нейморфизм және жарқырау алдын ала орнатуларын қамтиды.

Байқап көріңіз
🟦

CSS торы генераторы

CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған CSS және HTML-ді көшіріңіз.

Байқап көріңіз
↔️

CSS Flexbox генераторы

Ағы бағыты, оранды, біліктенді және түсінік өндіктерге әрекет жасаңыз — және CSS-ді көшіріңіз.

Байқап көріңіз

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