About linear gradients in CSS3

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Linear gradient usage

• Example of specifying gradient direction using angles

  <style>
      .container div:nth-child(1) {
              /* linear-gradient(angle,color-stop,color-stop,...) * Angle - Defines the direction of the reference line of the linear gradient by Angle, in deg * color-stop - indicates the color and position of the linear gradient */
              background: linear-gradient(0deg,red,yellow);
          }
  </style>
  Copy the code

• Use the keyword to specify the gradient direction

  <style>
    .container div:nth-child(2) {
              /* linear-gradient(side-or-corner,color-stop,color-stop,...) * Side-or-corner - Defining the direction of the baseline line of linear gradient by keyword * one keyword for horizontal direction: left and right * one keyword for vertical direction: Top and bottom * Note that the two keywords are sequentially independent * both keywords are optional * color-stop - indicates a linear gradient of color and position */
              background: -webkit-linear-gradient(left,red,yellow);
  </style>
  Copy the code

Background – clip properties

Background-clip Sets whether the element’s background (background image or color) extends below the border.

If no background color or image is set, this property is only set to transparent or on the border

Only translucent can see the visual effect (look at border-style or border-image), otherwise,

The style changes caused by this property are overridden by the border.

Control the dynamic effect of CSS3 with JS

<script>
        var box = document.getElementById('box');
        /* Indicates the position of the current gradient color - the position ranges from 0 to 100*/ 
        var num = 0;
​
        setInterval(function(){
            if (num >= 100) {
                num = 0;
            } else { 
                box.style.background = 'linear-gradient(90deg,blue,red ' + num +'%,blue)'; num++; }},10);
    </script>
Copy the code