Linear-gradient()

Definition and parameters

• linear-gradient() Function to create an image , This image is in 2 A gradual transition along a straight line between one or more colors .

  • Do you seem to understand ？ Let's start with a piece of code . The generated image is from red - green - Blue - yellow , The direction of change is from top to bottom . The positions of the four colors are 0%,33.3%,66.7%,100% It's about .

  •   background: linear-gradient(red, green, blue, yellow);
    

  • 

• Let's see if the parameters of this function are just many colors ？

  • Edge or corner ： This parameter specifies the color gradient line Starting point The location of .( The starting point will be said later )
    • If the parameter is edge , Contains two keywords , And the key words are to Start .
      • If the specified color changes horizontally , namely left or right
      • If the specified color changes in the vertical direction , namely top or bottom
      • The value of the parameter can be to top,to bottom, to left, to right, Converted into angles corresponding to 0deg,180deg,270deg,90deg. perhaps to bottom right( The lower right ),to top left( Top left ) etc.
    • If the parameter is horn , Just write the angle directly , Remember to bring the unit , Such as 45deg.
      • More flexible angles , Because using edges can only specify that the color changes horizontally or vertically .
      • There must be no spaces between degrees and units ！
      • Degrees can be negative .
      • The degree increases clockwise .
  • color stop: Consists of a color value , And followed by 1 or 2 Optional end positions . This position can be a percentage value , It can also be the length value along the gradient axis .
    • example 1
      • Let's adjust the position of green in the above figure to 50%, The blue position is adjusted to 75%

      •   background: linear-gradient(red, green 50%, blue 75%, 
          yellow);
        

      • 
      • Explain this picture a little , The color changes from red , At the height of the graph 50% Turn green , At the height of the graph 75% Turn blue , In the end in 100% End in yellow .
    • example 2
      • What happens if we specify an incorrect value ？

      •   background: linear-gradient(red, green 50%, blue 75%, 
          yellow 60%);
        

      • 
      • too bad , There is no transition between blue and yellow , Because the logic of the code is blue, it should be in 60% Where the transition is yellow , The yellow and blue ranges overlap , According to the official documents , There is a hard transition between coincident colors .Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition
      • If we follow this wrong practice , We can even draw a rainbow , Think about how to do ？ Guessed it , Only two adjacent colors need to coincide in the range ！

      •   background: linear-gradient(red 0% 15%, orange 10% 30%, 
          yellow 20% 45%, green 10% 60%, blue 45% 75%,
          cyan 60% 87%, purple 60% 100%);
        

      • 
      • Each color is followed by two percentage parameters , Respectively represent the starting position of the color , And where it ends . Make sure the colors overlap , Just the start position of the back color is before the end position of the front color .
  • color hint: The third parameter translates literally as Color suggestion . This is an interpolation hint , Defines two adjacent colors ( color-stop ) If the transition between . This parameter is the length value , Determines which of the two color lengths should be the midpoint of the color change . If you ignore , By default, the midpoint of the two color lengths is the midpoint of the color change .

    •   background: linear-gradient(red, blue);
        background: linear-gradient(red, 20%, blue);
      

    • 
    • Again , Let's try the given parameter exception , What happens ？

    •   background: linear-gradient(red, -20%, blue); //  Blue 
        background: linear-gradient(red, 120%, blue); //  Red 
      

    • 

form

• One linear-gradient() Is written by a Axis ( Color gradient line ) and 2 One or more color-stop Composed of . Every point on this axis is a different color . To smooth the color gradient , linear-gradient() Draw a lot of colored lines perpendicular to the axis , The color of each line is the color of the point where the line intersects the axis .
  • Picture from official website
  • gradient line By the gradient image box The midpoint and a role decide . The color of the gradient consists of the start point, the end point and the middle point color stop decision .
  • Starting point yes gradient line Where the first color on the starts . The end point yes gradient line Where the last color ends . These two points are related to gradient line Vertical and passing through box Perpendicular to the vertex of the line . The end point Can be seen as Starting point About box The mirror point of the midpoint . A slightly more complex definition brings an interesting phenomenon ： namely The color of the vertex closest to the start point is the same as the start point . The end point is the same . The following figure ,box The vertex of the upper left corner is the same as Starting point Same color , Because these two points are on the same line perpendicular to gradient line In a straight line .
  • 

Browser compatibility

•   .bcg-gradient {
        
        height: 300px;
        width: 200px;
        /* opera */
        background: -o-linear-gradient(to top, orange, skyblue);
        /* firefox */
        background: -moz-linear-gradient(to top, orange, skyblue);
        /* safari */
        background: -webkit-linear-gradient(to top, orange, skyblue);
        background: linear-gradient(to top, orange, skyblue);
    }
  

• It's on my computer ,IE 9 And previous versions do not support linear-gradient function , Novice tutorial say IE 8 And previous versions do not support , Why is this? Please tell me in the comments section .