Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan tanda semak dengan css
Bagaimana untuk mencapai kesan tanda semak dengan css
- WBOYasal
- 2021-12-14 14:32:193621semak imbas
Kaedah pelaksanaan: 1. Gunakan pernyataan "warna sempadan: warna; gaya sempadan: pepejal; lebar sempadan: 0 ketebalan 0" untuk menetapkan dua sempadan bersebelahan unsur segi empat tepat 2. Gunakan "transform :rotate(angle)" pernyataan boleh memutarkan segi empat tepat.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Bagaimana untuk mencapai kesan tanda semak dalam css
Dalam css, jika anda ingin mencapai kesan tanda semak, anda boleh menggunakan sempadan -warna dan gaya sempadan dan atribut lebar sempadan menetapkan elemen div dengan hanya dua sempadan bersebelahan.
Gunakan atribut transform dan fungsi rotate() untuk memutarkan elemen div untuk mencapai kesan tanda semak.
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{
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan tanda semak dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!