Sudut bulat CSS3
Menggunakan sifat jejari sempadan CSS3, anda boleh membuat "sudut bulat" untuk sebarang elemen.
Sifat jejari sempadan CSS3
Menggunakan sifat jejari sempadan CSS3, anda boleh membuat "sudut bulat" untuk sebarang elemen.
Berikut ialah tiga contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p>
</body>
</html>jejari sempadan CSS3 - nyatakan setiap sudut bulat
Jika anda menetapkan hanya satu nilai dalam atribut jejari sempadan, kemudian Cipta 4 fillet.
Walau bagaimanapun, jika anda ingin menentukan empat sudut satu demi satu, anda boleh menggunakan peraturan berikut:
Empat nilai: Nilai pertama ialah sudut kiri atas, nilai kedua ialah sudut kanan atas , nilai ketiga ialah sudut kanan bawah, dan nilai keempat ialah sudut kiri bawah.
Tiga nilai: nilai pertama ialah sudut kiri atas, nilai kedua ialah sudut kanan atas dan sudut kiri bawah, nilai ketiga ialah sudut kanan bawah
Dua nilai: nilai pertama ialah sudut kiri atas dan sudut kanan bawah, nilai kedua ialah sudut kanan atas dan sudut kiri bawah
Satu nilai: Empat sudut bulat mempunyai nilai yang sama
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>Anda boleh juga buat sudut elips:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>
</body>
</html>Atribut sudut bulat CSS3
Harta >border-radius Semua Singkatan empat sempadan sudut-*-*-sifat jejari jejari-sempadan-atas-kiri-mentakrifkan lengkok penjuru kiri atas
jejari-atas-sempadan-kanan mentakrifkan sudut kanan atas Lengkok daripada
