Rumah >hujung hadapan web >tutorial css >Cara membuat gambar css bulat
Cara membuat gambar css bulat
- 青灯夜游asal
- 2021-07-21 16:55:1610441semak imbas
Dalam CSS, anda boleh menggunakan atribut jejari sempadan untuk menjadikan imej lebih bulat. Hanya tambahkan "jejari sempadan: 50%;" pada elemen img. Atribut jejari sempadan boleh menetapkan sempadan bulat kepada elemen Jejari sudut bulat tidak boleh melebihi separuh lebar/tinggi.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam css, anda boleh menggunakan atribut jejari sempadan untuk menjadikan imej bulat.
Mari kita lihat contoh kod di bawah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
border-radius: 50%;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="Cara membuat gambar css bulat" >
</body>
</html>Rendering:
Penerangan:
Atribut jejari sempadan digunakan untuk menetapkan sempadan bulat untuk elemen Anda boleh menentukan nilai 1-4 untuk membuat (1~4) sudut bulat untuk sempadan; jejari sudut bulat tidak boleh Lebih daripada separuh lebar/tinggi.
Sintaks:
border-radius: 1-4 length|%
Nilai:
panjang Tentukan bentuk lengkung.
% Gunakan % untuk menentukan bentuk bucu.
Nota: Susunan empat nilai untuk setiap jejari ialah: sudut kiri atas, sudut kanan atas, sudut kanan bawah, sudut kiri bawah. Jika sudut kiri bawah ditinggalkan, sudut kanan atas adalah sama. Jika sudut kanan bawah ditinggalkan, sudut kiri atas adalah sama. Jika penjuru kanan sebelah atas ditinggalkan, sudut kiri atas adalah sama.
-
Empat nilai: nilai pertama ialah sudut kiri atas, nilai kedua ialah sudut kanan atas, nilai ketiga ialah sudut kanan bawah, dan nilai keempat ialah sudut kiri bawah sudut.
border-radius: 15px 50px 30px 5px
-
Tiga nilai: nilai pertama ialah sudut kiri atas, nilai kedua ialah The sudut kanan atas dan sudut kiri bawah, nilai ketiga ialah sudut kanan bawah
border-radius: 15px 50px 30px
-
dua nilai: Nilai pertama ialah sudut kiri atas dan sudut kanan bawah, nilai kedua ialah sudut kanan atas dan sudut kiri bawah
jejari sempadan: 15px 50px
-
Satu nilai: Empat nilai fillet adalah sama
border-radius: 25px
( Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Cara membuat gambar css bulat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!