注册登录

css3属性之---背景渐变linear-gradient()

定义与用法

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
知识兔

direction: 用角度值指定渐变方向(或角度)

color-stop1, color-stop2, ...: 用于指定渐变的起止颜色

案例

1. 默认渐变方向是从上至下

background: linear-gradient(yellow, green)
知识兔

2. 可以用角度值定义渐变方向(可以写成角度 deg)

background: linear-gradient(to top, yellow, green)
/*to top 从下至上 相当于 0deg*/
background: linear-gradient(to right, yellow, green)
/*to right 从下至上 相当于 90deg*/
background: linear-gradient(to bottom, yellow, green)
/*to bottom 从下至上 相当于 180deg*/
background: linear-gradient(to left, yellow, green)
/*to left 从下至上 相当于 270deg*/
background: linear-gradient(to top right, yellow, green)
/*to top right 沿对角线的方向*/
知识兔

3. 可以用px或百分比指定起始颜色的位置, 默认值为0%

 background: linear-gradient(to top right, yellow 50%, green)
知识兔
background: linear-gradient(to top right, yellow, green 50%)
知识兔
background: linear-gradient(to top right, yellow 50%, green 0);
/* 注意: 起始颜色的位置是从它自身所占的位置开始计算的, 第一个占了50%, 那第二个的 0 就是从50%开始 */
知识兔

4. 多次使用 linear-gradient() 时

background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #162e48 0),
  linear-gradient(135deg, red 40%, blue, transparent 0),
  linear-gradient(45deg, black, transparent);
/* 后面一条会填充前面一条的透明色 */
知识兔

5. 看到一个按钮效果, 收藏

<div class="div4">
  <div class="div4-1 active">OFF</div>
  <div class="div4-2">ON</div>
</div>
知识兔
.div4 {
  width: 144px;
  height: 30px;
  line-height: 30px;
  background: #162e48;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}
.div4-1,
.div4-2 {
  width: 86px;
  float: left;
}
.div4-1.active {
  margin-right: -28px;
  background: linear-gradient(-135deg, transparent 20px, #f00 0);
}
.div4-2.active {
  margin-left: -28px;
  background: linear-gradient(45deg, transparent 20px, #f00 0);
}
知识兔
计算机