前言
本文主要写css3渐变属性,以及兼容写法
提示:以下是本篇文章正文内容,下面案例可供参考
一、线性渐变
1.正常写法
1>线性渐变-平行
background-image:linear-grdient(to left,color1,color2,…)
(第一个参数表示开始方向)
background-image:linear-gradient(to right,red,blue,green);
注意:正常写法开始方向前必须加 to
2>线性渐变-对角
background-image:linear-grdient(to left top,color1,color2,…)
(第一个参数表示开始方向)
background-image:linear-gradient(to right top,red,blue,green);
2.兼容写法
1>方向
(第一个参数表示开始方向)
background-image:-webkit-linear-gradient(left,color1,…)
background-image: -moz-linear-gradient(left,color1,…)
background-image: -o-linear-gradient(left,color1,…)
background-image:linear-grdient(to left,color1,…)
注意:兼容写法开始方向前不加 to
2>度数
(第一个参数表示旋转度数)
background-image: -webkit-linear-gradient(80deg,color1,…)
background-image: -moz-linear-gradient(80deg,color1,…)
background-image: -o-linear-gradient(80deg,color1,…)
background-image: linear-gradient(10deg,color1,…)
写度数时,一定要注意兼容写法要用 90-你的方向值
3.渐变梯度
background-image: linear-gradient(90deg,red 20%,…)
(度数后加百分比可以实现梯度变化)
background-image:linear-gradient(90deg,red,blue 20%,pink);
二、径向渐变
1.径向渐变
background-image:radial-gradient(color1,color2,…)
注意:属性值最少两个
background-image: radial-gradient(red,blue)
2.控制渐变
1>基本语法
background-image: radial-gradient(shape size at position ,start-color1,…,last-color2);
1)position: left / right / center / top / bottom
2)shape: circle / elipse
3) size:closest-side (渐变到最近边) farthest-side(渐变到最远边) closest-corner(渐变到最近角) farthest-corner(渐变到最远角)
总结
以上是对Css3属性渐变的全部整理的,仅供参考