Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai persembahan berbentuk kipas gambar dalam css3
Bagaimana untuk mencapai persembahan berbentuk kipas gambar dalam css3
- WBOYasal
- 2021-12-16 17:13:432515semak imbas
Kaedah: 1. Gunakan atribut "jejari sempadan" untuk menetapkan elemen segi empat sama ke dalam bentuk kipas Sintaks ialah "jejari sempadan: nilai lebar segi empat sama 0 0;" 2. Gunakan "elemen {background-image:url (Picture path);}" pernyataan boleh menetapkan imej latar belakang untuk elemen berbentuk kipas.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara merealisasikan paparan gambar berbentuk kipas dalam css3
Dalam css, anda boleh menggunakan atribut jejari sempadan dan imej latar belakang atribut untuk merealisasikan paparan gambar berbentuk kipas.
Atribut jejari sempadan boleh menetapkan elemen segi empat sama kepada bentuk kipas, dan kemudian menggunakan elemen imej latar belakang untuk menetapkan imej latar belakang bagi elemen berbentuk kipas.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
border-radius:200px 0 0;
width: 200px;
height: 200px;
background-image:url(1118.02.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai persembahan berbentuk kipas gambar dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!