Rumah > Artikel > hujung hadapan web > Laksanakan kesan bucu bulat dalam css3

Laksanakan kesan bucu bulat dalam css3

WBOYasal: 2022-08-11 17:16:263165semak imbas

Dalam CSS3, anda boleh menggunakan atribut "jejari sempadan" untuk mencapai kesan sudut bulat Atribut ini digunakan untuk menetapkan sudut bulat sempadan luar elemen, dan atribut ini ialah atribut singkatan yang boleh. digunakan untuk menetapkan empat gaya sudut bulat yang berasingan, sintaksnya ialah "objek elemen {jejari sempadan: 1-4 panjang|% / 1-4 panjang|%;}".

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

Mencapai sudut bulat dalam css3

jejari sempadan membolehkan anda menetapkan sempadan luar elemen untuk dibundarkan. Menentukan bulatan apabila menggunakan satu jejari dan elips apabila menggunakan dua jejari. Persilangan bulatan (bujur) ini dan sempadan menghasilkan kesan sudut bulat.

Atribut jejari sempadan ialah atribut komposit yang boleh menentukan sehingga empat atribut jejari*-jidar

Sintaks

border-radius: 1-4 length|% / 1-4 length|%;

Nota : Susunan empat nilai bagi setiap jejari ialah: kiri atas, kanan atas, kanan bawah, kiri bawah. Jika sudut kiri bawah ditinggalkan, sudut kanan atas adalah sama. Jika sudut kanan bawah ditinggalkan, sudut kiri atas adalah sama. Jika penjuru kanan sebelah atas ditinggalkan, sudut kiri atas adalah sama.

panjang mentakrifkan bentuk lengkung.
% Gunakan % untuk menentukan bentuk bucu.

Contohnya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Hasil output:

Laksanakan kesan bucu bulat dalam css3

(Pembelajaran perkongsian video: tutorial video css, tutorial video html)

Atas ialah kandungan terperinci Laksanakan kesan bucu bulat dalam css3. 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：Adakah vue tergolong dalam html5?Artikel seterusnya：Adakah vue tergolong dalam html5?

Artikel berkaitan

Lihat lagi