CSS3背景颜色渐变（gradients），适用于微信小程序wxss

美奇开发工作室

于 2019-10-21 14:01:21 发布

阅读量857

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq15577969/article/details/102662571

版权

26 篇文章 1 订阅

订阅专栏

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange); 
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(to right, red, orange); 
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(to bottom right, red, orange);
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(60deg, red, orange); 
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange, yellow); 
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0)); 
}

.container {
  width: 100%;
  height: 500px;
  background: repeating-linear-gradient(red, orange, yellow 10%); 
}

.container {
  width: 100%;
  height: 500px;
  background: radial-gradient(red, orange, yellow);
}

.container {
  width: 100%;
  height: 500px;
  background: radial-gradient(red 5%, orange 20%, yellow 80%);
}

.container {
  width: 100%;
  height: 500px;
  background: repeating-radial-gradient(red, orange, yellow 10%);
}

关注