Kata Pengantar: Dalam artikel saya "Solusi Semi Sempurna untuk Rangka Sudut Bulat Super Ramping", saya telah merangkum tujuh solusi berbeda untuk kotak sudut membulat, yang pada dasarnya merangkum solusi penerapan kotak sudut membulat yang populer di Internet. Dan di artikel saya yang lain "Pojok Puncak Tanpa Gambar" adalah metode implementasi alternatif lainnya.
Menerapkan sudut membulat dengan CSS murni adalah peristiwa yang menurut semua orang buruk. Saya juga telah menulis dua artikel ringkasan. Mengapa masih ada artikel ini? Dalam proyek kami sebelumnya, penerapan sudut membulat sering kali dicapai dengan menggunakan gambar latar belakang. Namun, ketika proyek ini dirilis secara online, selama proses pemeliharaan, terkadang perlu menambahkan beberapa persyaratan baru karena persyaratan tersebut banyak digunakan pada proyek sebelumnya gambar sudut, dan semua gambar ini digabungkan menggunakan sprite CSS Agar tidak menambah pekerjaan ekstra, dan juga tidak ingin menggunakan JS untuk menambahkan lebih banyak permintaan http, diperlukan beberapa solusi CSS sederhana untuk menyelesaikan pertanyaan ini. Mengenai preferensi pribadi saya, saya juga suka menggunakan pendekatan tanpa gambar untuk menangani efek ini. Saya selalu merasa bahwa CSS dapat melakukan tugasnya, mengapa tidak dibiarkan saja?
Prinsip pelaksanaan :
Prinsip penerapan kotak sudut membulat menggunakan CSS murni telah dijelaskan secara detail oleh banyak orang di Internet. Diagram di bawah ini adalah efek setelah saya memperbesar salah satu sudut membulat.
Dari rendering di atas, kita dapat melihat bahwa kotak bulat ini sebenarnya terdiri dari container. Setiap container memiliki lebar yang berbeda. Lebar ini dicapai dengan margin, seperti: margin:0 5px; sisi kanan adalah 5 piksel, dan ada 5 garis dari atas ke bawah. Marginnya adalah 5px, 3px, 2px, dan 1px, menurun secara berurutan. Jadi berdasarkan prinsip ini kita dapat menerapkan struktur dan gaya html sederhana.
1. Lapisan struktur html:
<div class="warna tajam1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Konten teks</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 merupakan dua struktur sudut membulat kiri dan kanan di atas, sedangkan b5~b8 membentuk dua struktur sudut membulat kiri dan kanan di bawah. Konten adalah bagian utama dari konten. Masukkan semuanya ke dalam wadah besar dan beri nama kelas yang tajam untuk mengatur gaya umum. Kemudian nama kelas color1 ditumpangkan di atasnya. Nama kelas ini digunakan untuk membedakan skema warna yang berbeda, karena mungkin terdapat sudut membulat dengan warna berbeda.