Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css

青灯夜游

Lepaskan： 2023-02-17 14:13:18

asal

14699 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut jejari sempadan untuk menetapkan sempadan kepada sudut bulat Anda hanya perlu menambah gaya "nilai jejari sempadan;" pada elemen sempadan untuk menetapkan empat sudut bulat pada masa yang sama Jejari, menetapkan semua empat sudut sempadan kepada sudut bulat.

Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css

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

Cara paling biasa dan paling mudah untuk menetapkan sempadan bulat dalam css ialah menggunakan atribut jejari sempadan.

Sudut bulat CSS hanya perlu menetapkan satu sifat: jejari sempadan (bermaksud "jejari sempadan"). Anda memberikan nilai untuk sifat ini untuk menetapkan jejari keempat-empat penjuru pada masa yang sama. Semua ukuran CSS undang-undang boleh digunakan: em, ex, pt, px, peratusan, dsb.

jejari sempadan boleh menetapkan 1 hingga 4 nilai pada masa yang sama:

Jika anda menetapkan 1 nilai, ini bermakna kesemua 4 fillet menggunakan nilai ini.

<!DOCTYPE html>
<html>
<head>
<style> 
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px; 
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>

Salin selepas log masuk

Rendering:

Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css

Jika dua nilai ditetapkan, ia bermakna bahagian atas penjuru kiri dan penjuru kanan Gunakan nilai pertama untuk penjuru bawah, dan nilai kedua untuk penjuru kanan atas dan penjuru kiri bawah.
Jika tiga nilai ditetapkan, ini bermakna sudut kiri atas menggunakan nilai pertama, sudut kanan atas dan sudut kiri bawah menggunakan nilai kedua, dan sudut kanan bawah menggunakan nilai ketiga.
Jika empat nilai ditetapkan, ia sepadan dengan sudut kiri atas, sudut kanan atas, sudut kanan bawah dan sudut kiri bawah (urutan mengikut arah jam).

jejari sempadan juga boleh menetapkan set nilai kedua dengan garis miring. Set nilai pertama mewakili jejari mendatar, dan set nilai kedua mewakili jejari menegak. Set nilai kedua juga boleh menetapkan 1 hingga 4 nilai pada masa yang sama, dan peraturan aplikasi adalah sama dengan set nilai pertama.

Cadangan berkaitan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!