CSS3 ??? ?????() ??? ?????
??? ?????: ???? ????? ????? ?? ???? ?? ?????? ????. (????? ????? ??????.)
css3? ???-?????() ??? ?????? ?? ??? ??:
??????? ??? ?????? ?? ?????? ?????. ?? ?????? ???? "css3? ??-????? ?? ?????? ?? ??? ??" ?? ?????. .
????? ?? ?????? ?? ??? ??????? ???? ???? ?????. ??? ?????? ?? ?? ?????.
? ?????? ?? ??? ??? ?? ?? ???? ???? ????? ??? ?????? ???? ?? ? ????.
?? ??:
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ ) ???? ??:
(1).circle: ??? ?????? ?? ??? ?????.
(2).ellipse: ??? ?????? ??? ??? ?????.
(3).at <position>: ? ??? ?? ??? ?????.
(4).<extent-keyword>: ?? ????? ?? ??? ???? ???(?? ???? ???? ??? ?? ??? ?? ??? ?????? ???? ??? ? ??): Nearest-side, Nearest-Corner , ?? ? ?, ?? ? ?, ????? ??? ??? ???? ?? ??? ??? ???????.
(5).<color-stop>: ?? ??? ? ??? ?????.
?? ?:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
?? ?? ??? ???? ?? ?? ?? center???.
???? ??? ???? ? ??? ?? ?? ??, ? ??, ??, ???, ???? ?? ?? ?? ???? ????.
?? ??? ??? ????.
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(at left bottom,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
? ??? ??? ?????? ??, ? ???? ?? ?? ??? ?????. ?? ??? ????? ?? ?? ???? ????.
??? ?????? ??? ????? ??? ?? ????. ?? ?? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:radial-gradient(circle ,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
?? ??? ??? ?????? ??? ??? ? ????. ?? ??? ??? ????????.
我們也可以規(guī)定徑向漸變半徑的尺寸，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.closest-side{
background:radial-gradient(closest-side,#ace, #f96, #1E90FF);
}
.closest-corner{
background:radial-gradient(closest-corner,#ace, #f96, #1E90FF);
}
.farthest-side{
background:radial-gradient(farthest-side,#ace, #f96, #1E90FF);
}
.farthest-corner{
background:radial-gradient(farthest-corner,#ace, #f96, #1E90FF);
}
.contain{
background:-webkit-radial-gradient(contain,#ace, #f96, #1E90FF);
}
.cover{
background:-webkit-radial-gradient(cover,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="closest-side"></div>
<div class="closest-corner"></div>
<div class="farthest-side"></div>
<div class="farthest-corner"></div>
<div class="contain"></div>
<div class="cover"></div>
</body>
</html>
?? ?? ??: ?? ?? ????? ???? ???? ???. ?? Google Chrome??? ?????.
??? ???? ??? ?????.
(1).closest-side: ?? ???? ?? ??? ?? ??? ??? ??? ?????? ?? ??? ?????.
(2).closest-corner: ?? ???? ?? ??? ?? ??? ????? ??? ?????? ?? ??? ?????.
(3).farthest-side: ?? ???? ?? ???? ?? ? ??? ??? ?????? ?? ??? ?????.
(4).farthest-corner: ?? ???? ?? ???? ?? ? ????? ??? ?????? ?? ??? ?????.
(5).contain: ??, ?? ???? ?? ??? ?? ??? ???? ??? ?????? ?? ??? ?????. ?? ??? ?? ?????.
(6).cover: Cover, ?? ???? ?? ???? ?? ? ???? ??? ?????? ?? ??? ?????. ?? ? ??? ?????.
??? ??? ????.
? ??? ?? ??? ???? ??? ?????.
?? ??? ?????? ??? ?? ?? ??? ??? ?? ????. ?? ?? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.circle{
background:radial-gradient(circle 100px,#ace, #f96, #1E90FF);
}
.ellipse{
background:radial-gradient(ellipse 100px 50px,#ace, #f96, #1E90FF);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="ellipse"></div>
</body>
</html>
? ??? ?? ?? ??? ?????. ??? ?????? ?? ??? ??? ????? ???? ???? ? ?? ?????.
?? ?????? ???? ????? ??? ??? ?? ????. ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:250px;
height:250px;
}
.circle{
background:radial-gradient(circle,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
????? ????? ??? ????? ?? 30%~80% ???? ???? ???? ???? ????.
