渐变效果会提高页面的整体观感 页面基本上也都是要用到的
css能够实现的渐变有这两种
径向渐变
线性渐变
linear-gradient (线性渐变)
最简:(复制下面属性给盒子即可以复现效果)
width: 300rpx;
height: 100rpx;
background-image: linear-gradient(to right , blue,yellow ,blue)
最简效果图:
延申一下 如果我需要下图这种效果怎么办呢
可以添加一个角度属性来控制**-45deg** 角度可以改变 尝试一下就可以了
width: 300rpx;
height: 100rpx;
background-image: linear-gradient(-45deg, blue, yellow,blue);
/* background-image: linear-gradient(to right , blue,yellow ,blue) */
接下来简单做一个所有属性总结
linear-gradient首先是关于颜色 里面可以写若干个颜色 可添加百分比属性 如果我想要从上向下怎么办呢?(方向属性)
方向属性放在第一位 方向属性有两种写法1.to+(方向) 例:to left 2.角度写法 例:-45deg
还有一个可丑的重复线性渐变
repeating-linear-gradient
radial-gradient (径向渐变)
最简:
width: 300rpx;
height: 100rpx;
border-radius: 80%;
background-image: radial-gradient(gray,#bfbfbf,white);