Bagaimana untuk menyembunyikan separuh bulatan dalam css-tutorial css-php.cn

Bagaimana untuk menyembunyikan separuh bulatan dalam css

WBOY

Lepaskan： 2021-12-09 15:56:58

asal

2559 orang telah melayarinya

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.

Bagaimana untuk menyembunyikan separuh bulatan dalam css

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>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menyembunyikan separuh bulatan dalam css

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