border-radius CSS
Gratis, tanpa daftar, berjalan di peramban Anda.
Blob terpendek dalam CSS: delapan persentase pada satu properti, tanpa SVG di mana pun. Ini bentuk yang benar-benar berbeda dari blob SVG, dan ditawarkan sebagai hal tersendiri alih-alih sebagai blob yang sama dalam format lain.
Sebuah ekspor border-radius CSS, dipotong sampai beberapa baris pertama
.blob {
width: 320px;
height: 320px;
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}Yang perlu diketahui
- Satu properti pada elemen yang sudah Anda punya — tidak ada yang perlu ditempel ke markah.
- Hanya empat sudut, jadi ia tidak bisa menghasilkan blob bercuping enam dan tidak berpura-pura bisa.
- Beranimasi dan bertransisi dengan mulus, yang tidak dilakukan jalur SVG tanpa kerja tambahan.
- Nilainya dibuat di dalam batas penskalaan peramban itu sendiri, jadi apa yang Anda lihat itulah yang ditampilkan.
Dukungan peramban
Universal. Sintaks delapan nilai dengan garis miring sudah didukung sejak properti itu sendiri ada. Hanya blob — gelombang tidak punya padanan empat sudut, itulah sebabnya format ini dimatikan pada generator gelombang alih-alih diam-diam menghasilkan sesuatu yang salah.
Ukuran di seluruh prasetel
Setiap prasetel yang bisa diekspresikan format ini, diukur sebagaimana generator mengeluarkannya. Yang terkecil adalah Heksagon dengan 94 bita; yang terbesar adalah Kilau dengan 110 bita. Jumlah titiklah yang menentukan perbedaannya — setiap titik tambahan menambah satu ruas kubik penuh berisi koordinat.
| Format | Ukuran |
|---|---|
| Heksagon | 94 B |
| Cipratan | 102 B |
| Kerikil | 104 B |
| Bunga | 104 B |
| Gelembung | 106 B |
| Segitiga membulat | 108 B |
| Kristal | 108 B |
| Blob halus | 110 B |
| Blob organik | 110 B |
| Permata bersegi | 110 B |
| Bintang | 110 B |
| Kilau | 110 B |
Lebih rinci
Ada aturan dalam spesifikasi CSS yang menjebak hampir semua generator semacam ini. Kalau dua jari-jari yang bertemu di satu sisi berjumlah lebih besar daripada panjang sisi itu, peramban menghitung satu faktor skala dari sisi terburuk dan mengalikan **setiap** jari-jari dengannya. Satu pasangan yang buruk tidak hanya meratakan satu sudut — ia mengecilkan kebulatan seluruh bentuk, jadi peramban menggambar sesuatu yang kentara berbeda dari pratinjaunya. Pasangan di sini dibuat agar masing-masing berjumlah paling banyak 100%, sehingga faktor itu tepat 1 karena rancangan, bukan karena keberuntungan.
Pertanyaan
Bentuk apa saja yang bisa jadi border-radius CSS?
Format ini mencakup Blob. Itu batasan nyata, bukan keterbatasan alat ini: kalau sebuah generator tidak ada dalam daftar itu, formatnya memang tidak bisa mengekspresikannya, dan tetap menawarkannya berarti menyerahkan sesuatu yang diam-diam menggambar bentuk yang salah.
Seberapa besar ekspor border-radius CSS?
Antara 94 dan 110 bita di 12 prasetel yang mendukungnya. Lebih sedikit titik adalah tuas yang berpengaruh; kehalusan dan warna tidak memakan biaya.
Bisakah saya menyuntingnya manual setelahnya?
Bisa. Keluarannya teks biasa tanpa komentar generator, tanpa markah pengenal, dan tanpa tautan kembali ke sini. Ganti warnanya, ubah nama kelasnya, atau tempel jalurnya ke SVG Anda sendiri — tidak ada apa pun di hilir yang bergantung pada ia tetap seperti semula.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.