亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS3 sudut bulat

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中文網(wǎng)</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中文網(wǎng)</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>四個(gè)值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三個(gè)值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>兩個(gè)值 - 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中文網(wǎng)</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

jejari sempadan-bawah-kanan mentakrifkan lengkok penjuru kanan sebelah bawah >

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥(niǎo)教程(runoob.com)</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>