Bagaimana untuk mencapai kesan pekeliling dalam css

CSS ialah bahasa helaian gaya yang sering kami gunakan dalam pembangunan web Ia boleh mencapai banyak kesan halaman yang menarik, seperti sudut bulat, kecerunan, animasi, dll. Dalam artikel ini, kita akan melihat cara untuk mencapai kesan bulat menggunakan CSS.

Dalam CSS, kita boleh menggunakan sifat jejari sempadan untuk menetapkan sudut bulat bagi sesuatu elemen. Harta ini menerima satu atau lebih nilai yang mewakili jejari sudut sudut kiri atas, sudut kanan atas, sudut kanan bawah dan sudut kiri bawah masing-masing. Jika hanya satu nilai ditetapkan, ini bermakna empat penjuru adalah sama. Jika dua nilai ditetapkan, yang pertama mewakili jejari dalam arah mendatar dan yang kedua mewakili jejari dalam arah menegak. Jika tiga nilai ditetapkan, yang pertama mewakili jejari sudut kiri atas dan sudut kanan bawah, yang kedua mewakili jejari sudut kiri bawah dan atas kanan, dan yang ketiga mewakili jejari dalam arah menegak. Sebagai contoh, kod berikut akan menetapkan elemen div kepada bulatan dengan lebar dan ketinggian 100 piksel.

div{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Dalam kod ini, nilai jejari sempadan ialah 50%, yang bermaksud bahawa empat penjuru ditetapkan kepada jejari separuh lebar dan tinggi elemen, menghasilkan bulatan.

Selain menggunakan atribut jejari sempadan, kita juga boleh menggunakan unsur pseudo ::sebelum dan ::selepas untuk mencapai bulatan. Kita boleh menetapkan elemen segi empat sama untuk mempunyai lebar dan tinggi yang sama dan kemudian menukarnya kepada bulatan menggunakan ::sebelum atau ::selepas unsur pseudo. Sebagai contoh, kod berikut akan menetapkan elemen div menggunakan ::before pseudo-element kepada bulatan dengan lebar dan ketinggian 100 piksel.

div{
  width: 100px;
  height: 100px;
  position: relative;
}
div::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

Dalam kod ini, kami menetapkan elemen div kepada kedudukan relatif, dan kemudian menggunakan elemen pseudo ::before untuk meletakkan sepenuhnya sudut kiri atas elemen div. Lebar dan tinggi elemen pseudo diwarisi daripada elemen div, dan jejari sudutnya ditetapkan kepada 50% menggunakan sifat jejari sempadan, menghasilkan bulatan.

Sebagai alternatif, kita juga boleh menggunakan sifat transformasi dalam CSS3 untuk memutarkan elemen segi empat sama 45 darjah, dan kemudian gunakan sifat limpahan:hidden untuk memangkasnya ke dalam bulatan. Sebagai contoh, kod berikut akan menetapkan elemen div kepada bulatan dengan lebar dan ketinggian 100 piksel.

div{
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  overflow: hidden;
}
div::before{
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  margin: -50%;
  background-color: #000;
  border-radius: 50%;
}

Dalam kod ini, kami memutarkan elemen div 45 darjah dan memangkas empat penjurunya menggunakan atribut limpahan:tersembunyi. Kami kemudian menggunakan ::before pseudo-element untuk menjana bulatan yang mengambil keseluruhan elemen dan mengalihkannya ke titik tengah elemen div, menghasilkan bulatan.

Ringkasnya, CSS menyediakan pelbagai kaedah untuk mencapai kesan bulat, termasuk menggunakan sifat jejari sempadan, unsur pseudo dan sifat transformasi. Dalam projek sebenar, kita perlu memilih kaedah yang sesuai mengikut senario tertentu dan perlu mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pekeliling dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!