CSS样式:如何将从左到右过渡的渐变色让他从上向下越来越浅,这种效果如何做?-灵析社区

无敌英俊大师兄

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/7c26cae5e8147abf43cda1b0aeb7cfd6.png) 搜索框与轮播图下的背景色效果该如何做?

阅读量:12

点赞量:0

问AI
可以使用 "mask-image" (https://link.segmentfault.com/?enc=TRXUxJirPpUqWft7gU92MA%3D%3D.8ZiwZpmCdVU%2B3PWjlUYAQ2iU%2Fc8nrJj%2FMpCR9fb5PRX4vsNIj%2Bm2TeltcJqYJOHzEQw1nZIpjUtndeDuiFRB5g%3D%3D),加一个从上到下的渐变遮罩来实现。"MDN"上的描述需要了解一些像素计算相关的知识,一般UI同学会清楚一些 html, body { width: 100%; height: 100%; } html { background-color: #ffffff; } body { -webkit-mask-image: linear-gradient(to bottom, #000000, transparent); background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240) ,rgb(118, 216, 118)); background-repeat: no-repeat; } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241212/15d30205c232c06d360e1595ef17ee9c.png)