微信小程序（4）——CSS3漸變

CSS3 漸變&＃xff08;gradients&＃xff09;可以在兩個或多個指定的顏色之間顯示平穩的過渡。愛掏網 - it200.comCSS3 定義了兩種類型的漸變&＃xff08;gradients&＃xff09;&＃xff1a;

1、線性漸變&＃xff08;Linear Gradients&＃xff09;- 向下/向上/向左/向右/對角方向&＃xff1b;

2、徑向漸變&＃xff08;Radial Gradients&＃xff09;- 由它們的中心定義。愛掏網 - it200.com

?

▍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);
}

?