1、background: linear-gradient(to left,#d3959b,#bfe6ba);

to left 设置渐变从右到左,相当于270deg

de56c7720065cbfc81b9409480c00960.png

2、background: linear-gradient(to right,#d3959b,#bfe6ba);

to right设置渐变从左到右,相当于90deg

a737ea4abdf644722f04db455178ef5f.png

3、background: linear-gradient(to top,#d3959b,#bfe6ba);

to top 设置渐变从下到上,相当于0deg

83ee994d7ae3e7f5db040ac4a636eab6.png

4、background: linear-gradient(to bottom,#d3959b,#bfe6ba);

7ccd6b31cddce4565dc2aedacf725d0b.png

5、background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top = to top right :从左下角到右上角,对角线角度

1a0ecc01085d45c1c1b32b5aeae01d3c.png

6、background: linear-gradient(45deg,#d3959b,#bfe6ba);

和to top right 有细微差别(背景为正方形的时候无差别)

5205cfbe3aa33bdb97e9da5f7cd91d70.png

7、background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始颜色的位置,默认值为0%;

b5192fc20a928b85b17f299c084b8d67.png

8、background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

62d313af4e5b699c63cd343c660f43cd.png

94fb95a9b7cf5471a265af3ff75389b6.png

9、background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

448e8ee5f4675ba6624553fd91580f11.png

10、background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

62d313af4e5b699c63cd343c660f43cd.png

rgba使用了0.5的透明度

eb62413bc7a333532ce84cdc25f95e51.png

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐