Хүрээний радиус үүсгэгч хэрэгслийн үүрэг зориулалт
Энэхүү хэрэгсэл нь вэб дизайны хайрцагны өнцгүүдийн дугуйралтыг хялбархан тохируулах боломжийг олгодог. Хэрэглэгч өнцөг бүрийг тус тусад нь удирдах эсвэл тэдгээрийг хооронд нь холбож нэгэн зэрэг өөрчлөх боломжтой бөгөөд хэмжилтийн нэгжийг пиксел болон хувиар сонгох сонголттой. Үүнээс гадна, өнцөг бүрт хэвтээ болон босоо чиглэлийн тусдаа радиус оноож, илүү зөөлөн, органик хэлбэр дүрс үүсгэх зориулалттай эллипс горимыг санал болгодог. Таныг тохиргоогоо хийж байх явцад уг хэрэгсэл нь дизайнд тохирох CSS кодыг шууд үүсгэж харуулдаг давуу талтай.
Энэхүү хэрэгсэл нь дараах тохиолдолд вэб бүтээгчдэд туслах зорилготой:
- Вэб дизайны хайрцагны өнцгүүдийг хурдан хугацаанд дугуйлах.
- Квадрат элементээс төгс тойрог үүсгэх.
- Капсул (pill-shaped) хэлбэртэй товчлуур загварчлах.
- Дизайндаа зориулж зөөлөн, органик "дусал" хэлбэрүүдийг бий болгох.
- Өөрийн хүссэн хүрээний радиуст тохирох CSS кодыг шууд гаргаж авах.
Хэрэгслийн оролтын тохиргоонууд
Хүрээний радиусыг өөрчлөхийн тулд дараах оролтын удирдлагуудыг ашиглана:
- Гулсуурууд: Өнцгүүдийн дугуйралтыг нарийвчлан тохируулах зориулалттай бөгөөд гулсууруудын утга нь 0-100 хүртэлх хязгаартай байна.
- Бүх өнцгийг холбох сонголт идэвхтэй үед "Бүх өнцөг" гэсэн ганц гулсуур дөрвөн өнцгийг зэрэг удирдана.
- Өнцгүүдийн холбоосыг салгасан үед "Зүүн дээд", "Баруун дээд", "Баруун доод", болон "Зүүн доод" гэсэн дөрвөн тусдаа гулсуур гарч ирнэ.
- "Эллипс өнцгүүд" горимыг идэвхжүүлсэн үед өнцөг бүр нь "Хэвтээ" болон "Босоо" гэсэн тусдаа гулсууртай болно.
- Нэгж сонгогч: Хэмжилтийн нэгжийг "px" (пиксел) болон "%" (хувь) хооронд шилжүүлнэ.
- Бүх өнцгийг холбох шилжүүлэгч: Өнцгүүдийн тохиргоог хооронд нь холбох эсвэл салгах үүрэгтэй.
- Эллипс өнцгүүд шилжүүлэгч: Эллипс горимыг идэвхжүүлэх эсвэл идэвхгүй болгоно.
- Бэлэн загварууд: Шууд сонгож ашиглах боломжтой "Шовх", "Дугуйрсан", "Тойрог", "Дусал", болон "Навч" гэсэн товчлуурууд байна.
Анхны байдлаар гулсуурын утга 24 дээр тохируулагдсан байх бөгөөд энэ нь border-radius: 24px; гэсэн кодыг үүсгэдэг.
Хэрэгслийн гаралтын үр дүн
Тохируулга хийх явцад дараах үр дүнгүүд шууд харагдана:
- Урьдчилан харах (Preview): Хэрэглэгчийн тохируулсан хүрээний радиус хайрцаг дээр хэрхэн бууж байгааг нүдээр харах боломжтой дүрслэл.
- CSS: Үүссэн CSS кодыг "CSS" гэсэн гарчиг доор шууд харуулна.
- CSS хуулах товчлуур: Үүссэн кодыг санах ойдоо хурдан хуулж авах зориулалттай "CSS хуулах" шошготой товчлуур.
Ажиллах зарчим ба онцгой тохиолдлууд
Хэрэгслийг ашиглах явцад дараах дүрмүүд үйлчилнэ:
- Дөрвөн өнцгийн гулсуур нь цагийн зүүний дагуу зүүн-дээд, баруун-дээд, баруун-доод, зүүн-доод өнцгүүдэд харгалзан ажилладаг.
- Пиксел (px) нэгжийг сонгосон үед өнцөг нь тогтмол хэмжээгээр дугуйрагддаг.
- Хувь (%) нэгжийг сонгосон үед өнцөг нь хайрцагны хэмжээтэй харьцангуйгаар дугуйрах бөгөөд хэвтээ хувь нь өргөнийг, босоо хувь нь өндрийг дагаж өөрчлөгдөнө.
- Хэрэв хувь нэгж дээр бүх өнцгийг 50% болгож тохируулбал квадрат хэлбэртэй элемент төгс тойрог болон хувирна.
- Эллипс горим идэвхтэй үед өнцөг бүр тусдаа хэвтээ болон босоо радиустай болдог.
- Эллипс горим идэвхгүй үед өнцөг бүр нь нэг радиустай тойргийн дөрөвний нэг хэлбэртэй байна.
- Эллипс горим идэвхтэй үед генератор нь CSS-ийн хоёр утгатай ташуу зураастай (slash) хэлбэрийг бичих бөгөөд өнцгүүд дахин дугуй болоход богино хэлбэр рүү автоматаар шилждэг.
- Төгс тойрог үүсгэхийн тулд өнцгүүдийг холбож, нэгжийг хувь руу шилжүүлэн 50% болгох шаардлагатай. Мөн "Тойрог" бэлэн загвар нь бүх өнцгийг шууд 50% болгож тохируулдаг.
- Капсул хэлбэртэй товчлуур хийхийн тулд нэгжийг пиксел хэвээр үлдээж, аль нэг өнцгийн гулсуурыг товчлуурын өндрийн хагасаас хэтрүүлэн чирэхэд хангалттай бөгөөд ингэснээр ямар ч өргөнтэй байсан талууд нь бүрэн дугуй хэвээр үлдэнэ.
Нууцлал ба өгөгдөл боловсруулалт
Энэхүү хэрэгслийг ашиглахад таны хувийн нууцлал бүрэн хангагдана. Өнцөг бүрийг таны хөтөч дээр шууд зурдаг. Таны тохируулсан ямар ч өгөгдөл, мэдээллийг BroBroGo руу хуулж илгээхгүй.
Түгээмэл асуултууд (FAQ)
Дөрвөн өнцөг болон px vs % хэрхэн ажилладаг вэ?
Дөрвөн гулсуур нь цагийн зүүний дагуу зүүн-дээд, баруун-дээд, баруун-доод, зүүн-доод өнцгүүдэд харгалзана. Пикселээр өнцгийг тогтмол хэмжээгээр дугуйлах бол хувиар тохируулахад хайрцагны хэмжээтэй харьцуулж дугуйлна. Хэвтээ хувь нь өргөнийг, босоо хувь нь өндрийг дагах тул 50% нь квадратыг тойрог болгоно.
Эллипс горим ямар үүрэгтэй вэ?
Идэвхгүй үед өнцөг бүр нь нэг радиустай тойргийн дөрөвний нэг байна. Идэвхжүүлснээр өнцөг бүр тусдаа хэвтээ болон босоо радиустай болох бөгөөд ингэснээр зөөлөн, органик "дусал" хэлбэрийг үүсгэж болно. Генератор нь хоёр утгатай ташуу зураастай хэлбэрийг автоматаар бичих бөгөөд өнцгүүд дахин дугуй болоход богино хэлбэр рүү буцна.
Хэрхэн төгс тойрог эсвэл капсул хэлбэр үүсгэх вэ?
Өнцгүүдийг холбож, хувь (%) руу шилжүүлэн 50% болгоход квадрат нь тойрог болно. Харин капсул хэлбэртэй товчлуур хийхийн тулд пиксел (px) хэвээр үлдээж, аль нэг өнцгийг товчлуурын өндрийн хагасаас хэтрүүлэн чирнэ үү. Ингэснээр ямар ч өргөнтэй байсан талууд нь бүрэн дугуй хэвээр үлдэнэ. "Тойрог" бэлэн загвар нь үүнийг ганц товшилтоор тохируулдаг.