Penjelasan terperinci tentang sifat susun atur pekeliling CSS: jejari sempadan dan transformasi

. Dua sifat CSS utama untuk melaksanakan susun atur bulat ialah jejari sempadan dan transformasi. Artikel ini akan memperkenalkan secara terperinci cara menggunakan jejari sempadan dan mengubah sifat untuk mencipta reka letak gelang dan memberikan contoh kod khusus.

2. Atribut jejari sempadan

Atribut jejari sempadan digunakan untuk menetapkan sudut bulat bagi sesuatu elemen. Untuk membuat bulatan penuh, hanya tetapkan nilai sifat jejari sempadan kepada separuh lebar elemen. Contohnya, menggunakan jejari sempadan: 50px pada elemen dengan lebar 100px boleh mencapai reka letak bulat.

Kod Contoh 1:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: red;
}

Kod di atas akan mencipta elemen bulatan merah.

3. Atribut Transform
Atribut transform digunakan untuk mengubah elemen. Dalam susun atur bulat, yang paling biasa digunakan ialah atribut putar, yang membolehkan elemen berputar pada sudut tertentu. Untuk mencapai susun atur cincin, kita perlu memutarkan elemen ke sudut supaya ia kelihatan seperti bulatan. Khususnya, untuk mendapatkan bulatan lengkap, kita perlu memutar elemen 360 darjah.

Kod Contoh 2:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  transform: rotate(360deg);
}

Kod di atas akan mencipta elemen bulat merah dan memutarkannya 360 darjah.

4. Gunakan jejari sempadan dan ubah atribut bersama-sama
Untuk mencapai reka letak bulat yang sebenar, kita perlu menggunakan jejari sempadan dan mengubah atribut bersama-sama. Khususnya, kita perlu menetapkan jejari sudut elemen kepada separuh lebar elemen dan memutar elemen 360 darjah.

Contoh Kod 3:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  transform: rotate(360deg);
}

Contoh Kod 3 akan mencipta susun atur cincin yang benar.

5. Laraskan saiz dan gaya susun atur cincin
Dengan melaraskan lebar dan tinggi elemen, kita boleh menukar saiz susun atur cincin. Selain itu, kami juga boleh menggunakan sifat CSS lain untuk melaraskan gaya susun atur cincin, seperti warna latar belakang, gaya sempadan, dsb.

Contoh Kod 4:

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: blue;
  border: 2px solid black;
}

Kod di atas akan mencipta susun atur cincin biru dengan lebar dan tinggi 200px dan sempadan hitam.

6. Ringkasan
Dengan menggunakan jejari sempadan dan mengubah sifat CSS, kami boleh melaksanakan reka letak bulat dengan mudah. Sifat jejari sempadan digunakan untuk menetapkan sudut bulat elemen, manakala sifat transformasi digunakan untuk mengubah elemen, termasuk putaran. Dengan menggabungkan kedua-dua sifat ini, kita boleh mencipta pelbagai gaya susun atur cincin.

Saya berharap melalui pengenalan artikel ini, pembaca dapat mengenali dan menguasai penggunaan jejari sempadan dan mengubah atribut untuk melaksanakan reka letak bulat dalam reka bentuk web.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat susun atur pekeliling CSS: jejari sempadan dan transformasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!