CSS3 ?? ????? ?? ?????
?? ?????: ?? ??(?? ?? ??) ??? ???? ????? ? ???? ??? ?????? ?????(? ??? ?? ??? ????).
css3? ??-????? ?? ?????? ?? ??? ??:
??????? ??-????? ?? ?????? ???-????? ??? ?????? ?????.
? ???? ?? ?????? ?????. ??? ?????? ???? CSS3? ??? ????? ?? ?????.
?? ?? ???? ???? ??? ?? ??? ????.
(1) Mozilla(Firefox, Flock ?).
(2).WebKit(Safari, Chrome ?).
(3) ???(??? ????).
(4) Trident(IE ????), IE9 ?? ?????? ? ??? ?????.
?? ?? ?????? ??? ????? ?????(Google Chrome?? ??? ?? ?? ??? ??? ?? ?? ???? ???????).
?? ??:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
???? ??:
(1) [<point> <angle>,]: ?? ????? ??? ???? ? ???? ?? ?? ?????. ??? ?? ??, ??, ???, ??? ?? ??? ??? ??? ? ????. ??? ???? ?????, ??? ??? ???, ?? ?? ?? ??? ??? ???? ?????. ??? ???? ??? ??? ?????.
(2).<stop>: ??, ? ??? ? ?? ????? ?? ?? ??? ? ?????. ?? ?? ?? ?????? ???? ?? ???? ??? ? ?? ????? ??? ? ????.
??? ??? ????.
Google ??? ?? ??? ??? ?? ?? ??? ??? ????.
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
?? ?? ??? ??? ??? ???. ? ?? ? ?? ??? ?????? ?? ?? ???? ??? ??? ? ????.
?? ?:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.left{
background:-webkit-linear-gradient(left, #ace,#f96 );
background:-moz-linear-gradient(left, #ace,#f96 );
background:-o-linear-gradient(left,#ace,#f96);
}
.top{
background:-webkit-linear-gradient(top, #ace,#f96 );
background:-moz-linear-gradient(top, #ace,#f96 );
background:-o-linear-gradient(top,#ace,#f96);
}
.lefTop{
background:-webkit-linear-gradient(left top, #ace,#f96 );
background:-moz-linear-gradient(left top, #ace,#f96 );
background:-o-linear-gradient(left top,#ace,#f96);
}
.more{
background:-webkit-linear-gradient(left, #ace, #f96, #0094ff );
background:-moz-linear-gradient(left, #ace, #f96, #0094ff );
background:-o-linear-gradient(left, #ace, #f96, #0094ff);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>
?? ??? ?? ?????? ?? ???? ?????. ???? ??? ???????.
?? ????? ??? ??? ???? ?? ?????? ??? ???????. ??? ????? ??? ??? ? ????.
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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:-webkit-linear-gradient(left, #ace 80%, #f96);
background:-moz-linear-gradient(left, #ace 80%, #f96);
background:-o-linear-gradient(left,#ace 80%, #f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
? ??? ?????? ??? ???? 80%?? ???? ?????? ?????. 2???? ??? ??? ???? ?????? ? ??? 100%???. ?, 80% ??? ??? ????? ??? ?? ????, 80%~100% ??? ??? ????????. ?? ?? ???????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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:-webkit-linear-gradient(left, #ace 30%, #f96 80% );
background:-moz-linear-gradient(left, #ace 30%, #f96 80%);
background:-o-linear-gradient(left,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
? ????? 30%?? 80% ??? ??? ????? ???? ??? ??? ???? ???? ????.
?? ?? ??:
? ?? ??? ??? ?? ???? ? ?? ????? ??? ?? ??? ?? ????.
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
??????. line with ????? ?? ?? ??? ??? ?? ?? ?????. ??? ???? ??? ?? ??? ???? ???? ??? ?????.
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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:-webkit-linear-gradient(30deg,#ace,#f96);
background:-moz-linear-gradient(30deg,#ace,#f96);
background:-o-linear-gradient(30deg,#ace,#f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
??? ??? ????? ??? ??? ? ??? ??? ??? ??? ?? ?? ? ????. . ? ?? ?? ?? ??? ????.
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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:-webkit-linear-gradient(0deg,#ace,#f96);
background:-moz-linear-gradient(0deg,#ace,#f96);
background:-o-linear-gradient(0deg,#ace,#f96);
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementsByTagName("div")[0];
var obt = document.getElementById("bt");
obt.onclick = function () {
var timer = null;
var count = 0;
timer = setInterval(function () {
if (count == 360) {
clearInterval(timer);
}
count = count + 1;
odiv.style.background = "-webkit-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-moz-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-o-linear-gradient(" + count + "deg,#ace,#f96)";
}, 100)
}
}
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</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:1000px;
height:667px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
