Dengan menggunakan properti border-radius CSS3, Anda dapat membuat "sudut membulat" untuk elemen apa pun. Dengan properti border-radius, Anda dapat menggunakan aturan berikut:
(1) Empat nilai: nilai pertama adalah sudut kiri atas, nilai kedua adalah sudut kanan atas, nilai ketiga adalah sudut kanan bawah, dan nilai keempat adalah sudut kiri bawah (2) Tiga nilai: yang pertama nilai adalah Sudut kiri atas, nilai kedua adalah sudut kanan atas dan sudut kiri bawah, nilai ketiga adalah sudut kanan bawah (3) Dua nilai: nilai pertama adalah sudut kiri atas dan sudut kanan bawah, nilai nilai kedua adalah pojok kanan atas dan pojok kiri bawah ( 4) Satu nilai : keempat nilai filletnya sama
Jika ingin grafiknya memiliki efek sudut membulat, Anda hanya perlu menambahkan satu atribut yaitu atribut border-radius. Jika Anda ingin bentuknya sangat bulat, tingkatkan nilainya.
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Beranda</title>
<gaya>
div{
lebar: 100 piksel;
tinggi: 100 piksel;
warna latar belakang: rgb(151, 26, 49);
radius batas: 10px;
}
gambar{
lebar: 100 piksel;
tinggi: 100 piksel;
radius batas: 10px;
}
</gaya>
</kepala>
<tubuh>
<div>
<img src="../vue/1.jpg">
</div>
</tubuh>
</html>Kalau mau bulat tulis saja 100%.
efek bayangan kotak-bayangan
margin: 0 auto: Tidak perlu mengontrol bagian atas dan bawah, Auto memungkinkan ruang kiri dan kanan didistribusikan secara merata, lalu menempatkan kotak di tengah. Membiarkan jarak antara ruang kiri dan kanan terdistribusi secara merata adalah hal yang dilakukan otomatis.
0 berarti tidak ada bayangan pada arah horizontal, angka 0 kedua berarti tidak ada bayangan pada arah vertikal, dan angka ketiga adalah bayangan kabur.
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Beranda</title>
<link href="" type="teks/css" rel="stylesheet"/>
<gaya tipe="teks/css">
div{
lebar: 500 piksel;
tinggi: 500 piksel;
warna latar: hijaukuning;
margin: 0 otomatis;
bayangan kotak: 0 0 50px rgba(0, 0, 0, 0.5);
}
</gaya>
</kepala>
<tubuh>
<div kelas="d1">
</div>
</tubuh>
</html>Demikianlah artikel kali ini tentang efek bayangan kotak-bayangan fitur CSS3 baru dan radius batas bulat. Untuk informasi lebih lanjut tentang fitur baru CSS3 bayangan kotak, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan penelusuran di bawah Anda akan lebih mendukung downcodes.com di masa mendatang!