CSS3 ?? ???
CSS3 ?? ???
CSS3 border-radius ??? ???? ?? ??? ?? "?? ???"? ?? ? ????.
CSS3 border-radius ??
CSS3 border-radius ??? ???? ?? ??? ?? "?? ???"? ?? ? ????.
??? ? ?? ????.
<!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>CSS3 border-radius - ? ?? ??? ??
border-radius ??? ??? ?? ???? 4?? ?? ???? ?????.
??? ? ???? ??? ????? ?? ??? ??? ? ????.
4? ?: ? ?? ?? ?? ? ???, ? ?? ?? ??? ? ???, ? ?? ?? ? ??? ?? ?????, ? ?? ?? ?? ?? ??????.
? ?? ?: ? ?? ?? ?? ? ???, ? ?? ?? ??? ? ???? ?? ?? ???, ? ?? ?? ??? ?? ??????.
? ?? ?: ? ?? ?? ?? ? ???? ? ?? ?? ??? ?????. ? ?? ??? ??? ?? ?????.
? ?: ?? ??? 4?? ??? ??
<!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>四個值 - 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>?? ?? ????. ??? ???:
<!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>CSS3 ?? ??? ??
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Description
border-radius? ? ? ? ? ? ? ? ?? ? ??? ???-*-*-?? ??? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? through out through out's out's out through out out through outce outce out out through out through out through out through out through '''s' ‐ to ‐ ‐ ‐ ‐‐‐‐‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ? ? ? ? ? ? ? ? ? ? ? ? ?
border-bottom-right-radius? ?? ??? ?? ???? ?? ?????.
border-bottom-left-radius? ?? ?? ???? ?? ?????.
