Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar saiz bulatan dengan css

Bagaimana untuk menukar saiz bulatan dengan css

WBOYasal: 2021-11-30 18:30:513165semak imbas

Dalam CSS, anda boleh menggunakan atribut lebar dan ketinggian untuk menukar saiz bulatan Nilai kedua-dua atribut ini mestilah sama, menunjukkan diameter elemen bulatan Anda hanya perlu menambah "lebar:" kepada elemen bulatan diameter yang berubah, ketinggian: diameter yang berubah;" sudah cukup.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menukar saiz bulatan dalam css

Kita boleh menukar saiz bulatan dengan menukar diameter bulatan, dan dalam css, bulatan Diameter dikawal oleh atribut lebar dan ketinggian Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.ellipse{
width: 200px;
height: 200px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
.ellipse1{
width: 300px;
height: 300px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
</style>
</head>
<body>
<div class="ellipse"></div>
<div class="ellipse1"></div>
</body>
</html>

Hasil keluaran:

Bagaimana untuk menukar saiz bulatan dengan css

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk menukar saiz bulatan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menetapkan kesan kabur Gaussian dalam cssArtikel seterusnya：Bagaimana untuk menetapkan kesan kabur Gaussian dalam css

Artikel berkaitan

Lihat lagi