--- BACKGROUND css3 properties of graded linear-gradient ()

Definition and Usage

linear-gradient () function to create a linear gradient of an "image."

To create a linear gradient, you need to set a starting point and a direction (specified as an angle) transition effects. You have to define the end color. End color that you want to Gecko smooth transition, and you must specify at least two, of course, will be specified more colors to create more complex gradients.

CSS syntax

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

direction: an angle with the value of the specified gradient direction (or angle)

color-stop1, color-stop2, ...: the gradient specifies the starting and ending color

Case

1. The default gradient direction is from top to bottom

background: linear-gradient(yellow, green)

2. The direction of the gradient can be defined by the angle value (the angle can be written deg)

background: Linear-gradient (to Top, Yellow, Green)
 / * to Top from the bottom corresponding to 0deg * /
background: linear-gradient(to right, yellow, green)
/ * To right, from bottom to the equivalent of 90deg * /
background: linear-gradient(to bottom, yellow, green)
/ * To bottom, from bottom equivalent to 180deg * /
background: linear-gradient(to left, yellow, green)
/ * To left, from bottom equivalent to 270deg * /
background: linear-gradient(to top right, yellow, green)
/ * To Top right along the diagonal direction * /

3. The color can be specified with a starting position px or percentage, the default value of 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, 50% Yellow, Green 0);
 / * Note: the starting color is a position from a position occupied by its own counted, representing a 50% first, then the second a 0 is starting at 50% * /

4. When using multiple 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);
/ * Behind a front fills a transparent color * /

5. a button to see the effect, collectibles

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