css – 渐变

线性渐变

<div class="gradient"></div>

在白色的背景中, 从上往下开始渐变

.gradient {
  height: 150px;
  width: 200px;
  border: 1px solid #ccc;
  background: linear-gradient(#e86a43, #fff);
}

技术分享

从左开始渐变

.gradient {
  height: 150px;
  width: 200px;
  border: 1px solid #ccc;
  background: linear-gradient(-90deg, #e86a43, #fff);
}

技术分享

从右边开始

background: linear-gradient(90deg, #e86a43, #fff);

技术分享

左上角开始渐变

background: linear-gradient(-45deg, #e86a43, #fff);

技术分享

background: linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);

技术分享

中间是白色, 外面是 #64d1dd 色开始放射性渐变

.gradient {
   height: 150px;
   width: 200px;
   border: 1px solid #ccc;
   background: radial-gradient(#fff, #64d1dd);
}

技术分享

background: radial-gradient(#fff, #64d1dd, #70aa25);

技术分享

包含三种颜色的放射性渐变

background: radial-gradient(#fff, #64d1dd, #70aa25);

技术分享

指定圆形 (默认好像就是圆形, 不理了)

background: radial-gradient(circle, #fff, #64d1dd, #e86a34);

指定位置, 圆心是 (50px, 30px) firefox 的写法

background: radial-gradient(at 50px 30px, #fff, #64d1dd, #70aa25);

技术分享

指定颜色作用范围

background: radial-gradient(at 50px 30px, #fff, #64d1dd 80%, #70aa25);

技术分享