渐变
渐变需要设置给元素的图片属性,比如 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%);
