Bagaimana untuk mencapai kesan tanda semak dengan css-tutorial css-php.cn

Bagaimana untuk mencapai kesan tanda semak dengan css

WBOY

Lepaskan： 2021-12-14 14:32:19

asal

3585 orang telah melayarinya

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.

Bagaimana untuk mencapai kesan tanda semak dengan css

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk mencapai kesan tanda semak dengan css

(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!