代理加盟

2023全新代理计划,一站式模板建站,铜牌代理低至699元送终身VIP,独立代理后台,自营贴牌。

您现在的位置: 麦站网 > 站长学院 > 建站教程 >

CSS3的背景颜色background渐变代码

来源:本站原创 发布时间:2020-09-17 09:45:13热度:我要评论(0

麦站模板建站平台(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!超过1000套模板已登记版权,合规合法建站,规避版权风险!【点击获取方案】

画了几个漂亮的渐变色,暂时不考虑兼容性问题了,嘿嘿。

代码:

background-image: linear-gradient(0deg, #fff 0%,#000 100%);

上面是主代码,括号内的0deg是角度,后面跟着一个颜色和颜色开始的位置,后面跟着另一个颜色和颜色结束的位置,可以写很多个颜色,标注好位置就好。

样式1

css3 的background 渐变

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

样式2

css3 的background 渐变

background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

样式3

css3 的background 渐变

background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

样式4

css3 的background 渐变

background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

样式5

css3 的background 渐变

background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

样式6

css3 的background 渐变

background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

线性渐变:

background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);

Linear:渐变的类型(线性渐变);

渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。

 

使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。

中间颜色与中间颜色位置为可选参数。

不过要考虑浏览器的兼容,咱们这样写:

-webkit-gradient(linear,0  0,0  100%,from(起始颜色,to(结束颜色));  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient(起始颜色, 结束颜色);  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient(起始颜色, 结束颜色);  /*for firefox*/

-o-linear-gradient(起始颜色, 结束颜色);  /*Opera*/

linear-gradient(起始颜色, 结束颜色);  /*标准属性*/

    转载请注明来源网址:https://www.xiuzhanwang.com/news/2693.html

    发表评论

    评论列表(条)

       
      QQ在线咨询
      VIP限时特惠