Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan separuh bulatan dalam css
Bagaimana untuk menyembunyikan separuh bulatan dalam css
- WBOYasal
- 2021-12-09 15:56:582558semak imbas
Kaedah: 1. Letakkan elemen bulat dalam bekas div 2. Tetapkan ketinggian div kepada panjang jejari bulatan, dan tetapkan lebar div kepada panjang diameter bulatan, supaya div betul-betul Separuh bulatan boleh diletakkan 3. Tambahkan gaya "overflow: hidden" pada elemen div untuk menyembunyikan separuh bulatan di luar div.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara menyembunyikan separuh bulatan dalam css
Dalam css, anda boleh meletakkan elemen bulat dahulu ke dalam div, dan kemudian meletakkan Ketinggian div ditetapkan kepada jejari bulatan, dan lebar ditetapkan kepada diameter bulatan.
Pada masa ini, anda boleh menggunakan atribut limpahan untuk menyembunyikan bahagian bulat di luar div.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.mask2{
width: 100px;
height: 50px;
overflow: hidden;
}
.round2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="mask2">
<div class="round2"></div>
</div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan separuh bulatan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!