CSS3学习笔记-渐变

最新推荐文章于 2025-03-28 17:10:45 发布

转载最新推荐文章于 2025-03-28 17:10:45 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goOtter/p/9686424.html

渐变可以应用与任何使用背景图片的地方

底部向顶部

.test{
  background:linear-gradient(to top,orange,green);
  background:linear-gradient(0deg,orange,green);
  background:linear-gradient(360deg,orange,green);
  background:linear-gradient(-360deg,orange,green);
}

顶部向底部

.test{
  background:linear-gradient(to bottom,orange,green);
  background:linear-gradient(180deg,orange,green);
  background:linear-gradient(-180deg,orange,green);
}

从左到右

.test{
  background:linear-gradient(to right,orange,green);
  background:linear-gradient(90deg,orange,green);
  background:linear-gradient(-270deg,orange,green);
}

从右到左

.test{
  background:linear-gradient(to left,orange,green);
  background:linear-gradient(-90deg,orange,green);
  background:linear-gradient(270deg,orange,green);
}

从左下到右上

.test{
  background:linear-gradient(to top right,orange,green);
  background:linear-gradient(45deg,orange,green);
  background:linear-gradient(-315deg,orange,green);
}

从右上到左下

.test{
  background:linear-gradient(to bottom left,orange,green);
  background:linear-gradient(225deg,orange,green);
  background:linear-gradient(-135deg,orange,green);
}

从左上到右下

.test{
  background:linear-gradient(to bottom right,orange,green);
  background:linear-gradient(135deg,orange,green);
  background:linear-gradient(-225deg,orange,green);
}

从右下到左上

.test{
  background:linear-gradient(to top left,orange,green);
  background:linear-gradient(-45deg,orange,green);
  background:linear-gradient(315deg,orange,green);
}

多色渐变

.test{
  background:linear-gradient(to top,orange,green,yellow,red);
}

自定义渐变

.test{
      background:linear-gradient(to top ,orange 10%,green 20%,yellow 50%,blue 100%)
}

径向渐变

圆形渐变

.test{
  background:radial-gradient(circle,orange,green)；
}

椭圆渐变

.test{
  background:radial-gradient(ellipse,orange,green)；
}

靠左上角

.test{
  background:radial-gradient(circle at top left,orange,green)；
}

转载于:https://www.cnblogs.com/goOtter/p/9686424.html