渐变css(css设置渐变色从上到下)

  我们在网页设计中最常见的 CSS 渐变类型是 linear-gradient()。之所以称为“线性”,是因为颜色从左到右、从上到下或以您在某个方向上选择的任何角度渐变。

image.png

  线性 CSS 渐变:

  .background {

  background: linear-gradient(to right, rgba(255. 255. 255. 0), rgba(255. 255. 255. 1));

  }

  这是一个从完全透明(rgba(255. 255. 255. 0))到完全不透明(rgba(255. 255. 255. 1))的水平线性渐变示例。

  径向渐变透明:

  css复制代码

  .background {

  background: radial-gradient(circle at center, rgba(255. 255. 255. 0), rgba(255. 255. 255. 1));

  }

  这是一个从完全透明(rgba(255. 255. 255. 0))到完全不透明(rgba(255. 255. 255. 1))的圆形径向渐变示例。

  请根据您的需求调整颜色值和渐变方向。通过改变渐变起始点、终止点和颜色的透明度,您可以实现不同的渐变透明效果。


发表评论

评论列表

还没有评论,快来说点什么吧~