CSS3 ?? ??? ??
CSS3 ?? ???? ??
?? ?? ??? ?? ??? ?? ???? ?? ???? ???? ???. CSS3? ??? ? ?? ??? ???? ???? ? ??? ??? ??? ??? ?? ???? ?? ?? ??? ????.
* ?? ?? ???? ????. ??? ??? ??, ?????? ? ??? ??? ???? ??? ? ?? ???? ????.
* ???? ??? ?????. ???? HTTP ??? ? ?? ?? ??? ? ???? ? ??? ?????.
* ??? ???? ????. ?? ??(???? ??, ?? ??, ?? ???? ?? ?)??? ?? ??? ????? ???? ??? ??? ??? ? ????. CSS3??? ?? ?? ???? ????.
CSS3 border-radius ??
?? ??:
border-radius: none | <length>{1,4} [/ < ;length>{1,4} ]?
? ??:
<length>: ?? ??? ??? ?? ???? ??? ?? ????. ???? ? ????.
??? ??:
Border-radius? ??????. "/" ?? ?? ?? ?? ???? ?? "/" ?? ?? ?? ??? ???? "/" ?? ?? ?? ??? ?????. "/"? ??? ?? ? ?? ??? ?????. ?? ? 4?? ?? ????, ?????, ?????, ???? ??? ?????, ?? ??? ?? ??? ???? ???.
1. ??? ????. ?? ???? ?? ?, ??? ?, ??? ??, ?? ??? ? ?? ?? ?????.
2. ? ?? ?? ?? ?? ??? ??? ??? ?? ? ?? ?? ??? ??? ??? ?? ??? ?? ? ?? ?? ????.
3 , ? ?? ?? ????. ? ?? ?? ?? ??? ???? ????. ? ?? ?? ??? ??? ?? ??? ???? ????, ? ?? ?? ??? ??? ?????.
4. ?? 4?? ??? ? ?? ?? ?? ?, ? ?? ?? ??? ?, ? ?? ?? ??? ??, ? ?? ?? ?? ??? ?????.
?? ?? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>?? ?? ? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>?? ?? ? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>?? ?? 4? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>???? ??
IE 9, Opera 10.5, Safari 5, Chrome 4 ? Firefox 4? ?? ?? border-radius ??? ?????. Safari ? Chrome? ?? ??? -webkit-border-radius ??? ????, Firefox? ?? ??? -moz-border-radius ??? ?????.
?? ???? ????? -moz-border-radius? border-radius? ??? ???? ???.
-moz-?? ??: 15px;
?? ??: 15px;
(??: border-radius? ???? ???? ?? ??? ??? ???? ?? ? ????.)
?? ?? ????? border-radius? ????? ?? ?? ???? ??? ????. ? ???? ??, ??, ???(?? ???, ?? ??? ?) ? ??? ??? ?? ? ???? ??? ??? ?? ????? ??? ??? ????? ?????. ? ??? ????.
?? ????? ??? ??? ??? ??? ???? ?? ???? ?? ????. ?? ?? ??? ?? ??? ? ?? ???? ???? ??? ??? ??? ???? ??? ?? ???? ?? ????.
