<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3渐变的效果</title> <style> div{ text-align: center; width:230px; height: 60px; -webkit-border-radius:15px; -moz-border-radius: 15px; } .box1{ 代表的是谷歌的浏览器-webkit-gradient(linear,开始位置，结束位置,from(颜色),to(颜色)) Mozilla浏览器-moz-linear-gradient(开始位置，开始颜色，结束颜色); background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999)); background: -moz-linear-gradient(top,red,blue); } .box2{ 渐变效果是在css3当中的background或者background-image 实现更加复杂的功能 谷歌浏览器当中:color-stop:(位置，颜色)，该功能是将划分的这段区域划分成0-1，开始为0，结束为1 火狐当中为:-moz-linear-gradient(开始位置，开始颜色，中间点颜色，百分比，结束颜色) background: -webkit-gradient(linear,left top,left bottom, color-stop(0.0,red), color-stop(0.3,white), color-stop(0.5,black), color-stop(0.8,blue), color-stop(1.0,green) ); background: -moz-linear-gradient(top,red,#ffffff 50%,blue); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
9400
