微信小程序（4）——CSS3渐变

CSS3 渐变&＃xff08;gradients&＃xff09;可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变&＃xff08;gradients&＃xff09;&＃xff1a;

1、线性渐变&＃xff08;Linear Gradients&＃xff09;- 向下/向上/向左/向右/对角方向&＃xff1b;

2、径向渐变&＃xff08;Radial Gradients&＃xff09;- 由它们的中心定义。

▍demo.wxml

11121314151617181920212223


▍demo.wxss

.container{/* 内边距 */padding: 20rpx;
}.demo{/* flex布局 */display: flex;/* 对齐方式 */justify-content: center;/* 底部距离 */margin-bottom: 20rpx;/* 边框 */border: 1rpx solid #888;/* 宽度 */width: 100%;/* 高度 */height: 200rpx;/* 行高 */line-height: 200rpx;/* 字体颜色 */color: white;/* 设置字间距 */letter-spacing: 5rpx;
}

▍线性渐变&＃xff1a;从上至下

.view11 {background: linear-gradient(red, blue);
}