css – 渐变

css – 渐变

Table of Contents

• 线性渐变
• 放射性渐变

渐变生成工具:
http://www.colorzilla.com/gradient-editor

线性渐变

<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);