CSS3 rounded corners
CSS3 rounded corners
##CSS3 border-radius property
Examples
The following are three examples of rounded corners<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn)</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(/upload/course/000/000/006/5809800b44336872.jpg);
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>Run the program and try itCSS3 border-radius - specify each rounded corner
If you specify only one value in the border-radius property, 4 rounded corners will be generated . However, if you want to specify the four corners one by one, you can use the following rules: Four values: The first value is the upper left corner, the second value is the upper right corner , the third value is the lower right corner, and the fourth value is the lower left corner. Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, the third value is the lower right corner. Two values: the first value is the upper left corner and the lower right corner, the second value is There is one value in the upper right corner and the lower left corner: The four rounded corners have the same valueThe following are three examples:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn)</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f2f732;
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: #ffaacd;
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>Run the program and try itCreate elliptical corners
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn)</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #f2f77e;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #57fff0;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #ff9b41;
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>Run the program and try it
