CSS3之渐变

渐变

渐变需要设置给元素的图片属性,比如 background 或者 background-image.
注意渐变产生的是图像,换句话来说,所有可以设置图像的地方都能够使用它,能够减少我们页面图片的使用,兼容性不错.

线性渐变

顾名思义,就是朝着某个方向发生进行渐变

• 语法:

/*语法组合方式 可以添加多个颜色*/
background-image: linear-gradient(方向,开始颜色 开始位置 ,颜色2 开始位置,颜色3 开始位置.....);


/* 具体代码  */
/* 朝着 右上角 从红色到黄色*/
background-image: linear-gradient(to top left,red,yellow);

/* 朝着 顺时针45度 从红色到黄色*/
background-image: linear-gradient(45deg,red,yellow);

/* 朝着 顺时针45度 红色,黄色,绿色*/
background-image: linear-gradient(45deg,red,yellow,green);

/* 朝着 顺时针45度 红色到 10px结束 黄色从 20px开始 */
background-image: linear-gradient(45deg,red 10px,yellow 20px);

/* 朝着 顺时针45度 红色到10%结束 黄色从 20%开始 */
background-image: linear-gradient(45deg,red 10%,yellow 20%);

• 注意:
  • 如果上一个颜色的结束,跟下一个颜色的开始相等,那么不会出现过度
  • 比如:

background-image: linear-gradient(45deg,red 10%,yellow 10%);

* 渐变在谷歌浏览器中的过渡效果(transition)不全部支持,ie中支持过渡,所以实际工作中,不会这么用
* 渐变 在谷歌浏览器中可以使用background-position和transition来实现动画效果

/*语法组合方式2 */
background-image: linear-gradient(方向,颜色1 从0开始直到某个值 ,颜色2 从某个值开始,颜色2 到某个值结束,.....,最后一个颜色 从某个值开始直到100%);

/* 具体代码  */
background-image: linear-gradient(64deg,yellow 33.33% ,green 33.33%,green 66.66%,yellow 66.66%);

径向渐变

指的是以某个点作为圆心,向四周扩散的渐变

• 语法:

/* 圆形渐变写法 */
background:radial-gradient(半径  ,颜色1,颜色2等等);

/* 椭圆渐变写法 */
background:radial-gradient(横向半径,竖向半径  ,颜色1,颜色2等等);

/* 设置位置 */
background:radial-gradient(横向半径,竖向半径  at 位置,颜色1,颜色2等等);

/*具体代码*/
/*半径100px 红色 绿色*/
background:radial-gradient(100px,red,green);

/*横向半径100px 竖向半径200px 红色 绿色*/
background:radial-gradient(100px 200px,red,green);

/*横向半径100px  红色10px 绿色 20px*/
background:radial-gradient(100px 200px,red 10px,green 20px);

/*横向半径100px  红色10% 绿色20%*/
background:radial-gradient(100px 200px,red 10%,green 10%);

/*横向半径100px  红色10% 绿色20% 在100px 100px位置*/
background:radial-gradient(100px 200px at 100px 100px,red 10%,green 10%);

• 注意:
  • 跟线性渐变一样如果上一个颜色的结束,跟下一个颜色的开始相等,那么不会出现过度
  • 比如:

background-image: radial-gradient(100px,red 10%,yellow 10%);