Rumah > hujung hadapan web > tutorial css > Cara membuat suku bulatan dalam css

Cara membuat suku bulatan dalam css

青灯夜游
Lepaskan: 2021-11-09 14:01:20
asal
8217 orang telah melayarinya

Cara membuat suku bulatan dalam CSS: 1. Gunakan atribut lebar dan tinggi untuk menetapkan lebar dan tinggi elemen menjadi sama 2. Gunakan atribut jejari sempadan untuk menetapkan nilai a sudut bulat elemen kepada nilai lebar dan tinggi Nilai bagi tiga sudut bulat yang lain ialah 0, dan sintaksnya ialah "jejari sempadan: nilai lebar atau tinggi 0 0 0;".

Cara membuat suku bulatan dalam css

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

Dalam CSS, apabila membuat bulatan, atribut jejari sempadan terlintas di fikiran.

Atribut ini boleh menukar elemen segi empat sama dengan lebar dan tinggi yang sama kepada bulatan

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>
Salin selepas log masuk

Cara membuat suku bulatan dalam css

Tetapi kadangkala kita tidak memerlukan bulatan penuh, hanya Perlu bahagian, menggunakan suku bulatan, bagaimana untuk melakukan ini?

Atau gunakan atribut jejari sempadan untuk menetapkan nilai satu sudut bulat elemen kepada nilai lebar atau tinggi dan nilai tiga sudut bulat yang lain kepada 0:

border-radius: 50px 0 0 0;
Salin selepas log masuk

Cara membuat suku bulatan dalam css

border-radius: 0 50px 0 0;
Salin selepas log masuk

Cara membuat suku bulatan dalam css

border-radius: 0 0 50px 0;
Salin selepas log masuk

Cara membuat suku bulatan dalam css

border-radius: 0 0 0 50px;
Salin selepas log masuk

Cara membuat suku bulatan dalam css

(Video pembelajaran perkongsian: tutorial video css)

Atas ialah kandungan terperinci Cara membuat suku bulatan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan