Bagaimanakah Saya Boleh Mencipta Sudut Bulat dengan Sempadan Kecerunan dalam CSS?

Melaksanakan Jejari-Sempadan dan Imej Sempadan Kecerunan

Menggayakan elemen dengan jidar bulat dan kecerunan boleh mencabar. Percubaan untuk menggabungkan kedua-dua sifat jejari sempadan dan imej sempadan selalunya menghasilkan sama ada sudut bulat tanpa kecerunan atau sempadan kecerunan tanpa pembundaran.

Penyelesaian:

Mujurlah, adalah mungkin untuk mencapai kedua-dua sudut bulat dan sempadan kecerunan dengan menggunakan gabungan teknik CSS. Berikut ialah penyelesaian bukan SVG yang menawarkan pendekatan yang lebih ringkas:

div {
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Penjelasan:

• Sempadan dua telus yang telus menetapkan lebar dan menghapuskan sebarang permulaan warna sempadan.
• Sifat imej latar belakang mencipta dua kecerunan: satu kecerunan putih pada permulaan dan satu kecerunan berwarna menjelang penghujung.
• asal latar belakang: kotak sempadan meletakkan kecerunan pada jidar, menjajarkannya dengan bucu bulat.
• klip latar belakang: kotak kandungan, kotak sempadan mengawal cara kecerunan dipotong, memastikan bahawa sempadan kekal penuh kecerunan dan kawasan dalam kekal putih.

Dengan teknik ini, anda boleh menggabungkan sudut bulat dan sempadan kecerunan dengan bergaya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Bulat dengan Sempadan Kecerunan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!