网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

css渐变,css渐变色背景

2020-4-11 14:51:35 | 作者:老铁SEO | 0个评论 | 人浏览

  #grad{/*Safari5.1-6.0*/


  background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/


  background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/


  background:linear-gradient(red,blue);/*标准的语法*/


  }


  #grad{


  background:/*Safari5.1-6.0*/


  background:-o-linear-gradient(right,red,blue);/*Opera11.1-12.0*/


  background:-moz-linear-gradient(right,red,blue);/*Firefox3.6-15*/


  background:linear-gradient(toright,red,blue);/*标准的语法*/


  css渐变色背景


  在Mozilla下


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


  参数说明


  1,起点位置top是从上到下,left是从左到右,lefttop是左上到右下


  2,开始颜色,


  3,结束颜色


  在Webkit下


  -webkit-linear-gradient(top,#ccc,#000);


  参数与mozilla一致


  在Opera下


  background:-o-linear-gradient(top,#ccc,#000);


  数与mozilla一致


  更多的参数应用可以去度娘查询,有很详细参数使用示例


  css渐变色


  需要准备的材料分别有:电脑、浏览器、html编辑器。


  1、首先,打开html编辑器,新建html文件,例如:index。


  2、在index中的标签中,输入css代码:


  div{width:200px;height:150px;background:linear-gradient(red,white);}


  3、浏览器运行index页面,此时td中的div的背景颜色从红色到白色渐变。


  css渐变色代码


  #grad{/*Safari5.1-6.0*/


  background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/


  background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/


  background:linear-gradient(red,blue);/*标准的语法*/


  }


  #grad{


  background:/*Safari5.1-6.0*/


  background:-o-linear-gradient(right,red,blue);/*Opera11.1-12.0*/


  background:-moz-linear-gradient(right,red,blue);/*Firefox3.6-15*/


  background:linear-gradient(toright,red,blue);/*标准的语法*/


  css渐变属性


  针对不同浏览器有不同的前缀,基本还是相似的,下面的意思是线性渐变,从上方开始,从黑色渐变到白色


  -webkit-linear-gradient(top,#000,#fff);


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


  -o-linear-gradient(top,,#000,#fff);


  也可以加一些渐变中间的颜色


  -webkit-linear-gradient(top,#000,#eee20%,#fff);


  也可以使用colorstop,跟上面的意思相同


  -webkit-linear-gradient(top,#000,color-stop(0.2,#eee),#fff)

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐