Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css
Bagaimana untuk menetapkan sempadan ke sudut bulat dalam css
- 青灯夜游asal
- 2021-09-14 16:21:3314672semak imbas
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.
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>Rendering:
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!