CSS3的背景渐变_好看的CSS3背景渐变色
2017-09-04 13:17:54  By: dwtedx

关于css3的渐变、目前各大浏览器还未做到很好的支持、所以需要在我们使用时加上各大浏览器前缀

-moz-:使用Mozilla内核的浏览器(Firefox浏览器)

-webkit-:使用Webkit内核的浏览器(Chrome,Safari浏览器)

-o-:使用Opera内核的浏览器(Opera浏览器)

这里对IE不做过多介绍、对于本文背景颜色的渐变、也没有考虑IE


一、线性渐变(linear-gradient)

1.语法:-moz-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……)

参数:第一个参数便是线性渐变的方向

top:从上到下;

left:从左到右;

right:从右到左;

bottom:从下到上;


也可以两两组合、例如从左上:left top,从右上:right top等等、这里就不过多介绍了、angle代表角度(一直认为涉及到角度一个平面直角坐标系足够直观)、第二个参数和第三个参数分别是起点和终点的颜色、还可以再他们之间插入更多的参数、表示多种颜色的渐变、颜色支持使用16进制数值表示、也可以使用rgb(a)数值


例:background:-moz-linear-gradient(top,#000,#fff);  

注:表示从#000到#fff的渐变


background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

注:表示0-50%是#000,50%-100%是#555


2.语法:-webkit-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……)  【新式语法书写规则】

-webkit-gradient(<type>,<start point>/<angle>,<end point>/<angle>,<color-stop>,<color-stop>……) 【老式语法书写规则】

新式语法书写规则与其他相同这里不过多介绍、下面介绍一下老式语法规则:


参数:第一个参数表示渐变类型、可以是linear(线性)或者radial(径向);

第二个参数和第三个参数表示渐变的起点和终点、可以是坐标或关键值;

第四个和第五个参数分别表示起点和终点的颜色、还可以再他们之间插入更多的参数、表示多种颜色的渐变、颜色支持使用16进制数值表示、也可以使用rgb(a)数值、

例:background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));

注:表示从上到下、从#fff到#000的渐变


background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));

注:表示从左上到右下0-50%是白色、50%-100%是透明度为0.2的黑色


3.语法:-o-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……)

例:background:-moz-linear-gradient(top,#000,#fff);  

注:表示从#000到#fff的渐变


二、径向渐变(radial-gradient)

语法:-moz-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>……);

-webkit-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>……);


oprea浏览器对径向渐变的支持还不太好、所以在这里不介绍、除了在线性渐变中看到的其实位置、方向和颜色、径向渐变允许指定渐变的形状:圆形(circle)和椭圆形(ellipse)和大小:最近端(closest-side)、最近角(closest-corner)、最远端(farthest-side)、最远角(farthest-corner)、包含(contain)、覆盖(cover)、对于这几个大小的设置有的差距甚微、有些迷惑

例:background:radial-gradient(#fff, #000);

background: -webkit-radial-gradient(#fff, #000);

注:表示从白到黑的圆形渐变


background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000);

background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000);

注:表示在80% 20%的位置有白色圆到黑色的渐变


2.css的重复渐变

语法:-moz-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……);

-webkit-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……);

-o-repeating-linear-gradient(<point>/<angle>,<color-stop>,<color-stop>……);

-moz-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>……);

-webkit-radial-gradient(<point>/<angle>,<shape>/<size>,<color-stop>,<color-stop>……);


例:background: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

background: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px);

注:表示一圈一圈的黑白圆圈(不要太晕哦)


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+