how to make a css gradient stop after so many pixels?

前端 未结 4 731
-上瘾入骨i
-上瘾入骨i 2021-02-05 08:14
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

I have this code above and i j

4条回答
  •  情深已故
    2021-02-05 08:38

    In CSS3:

    radial-gradient(ellipse at center center, 
      rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
      rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%) 
    

    You can have multiple stops in the gradient. You can also specify length in pixels rather than percentages. You can also use rgba to make transparent colours.

    You start with your first colour at 0%, the center.
    Then you have the second colour at x pixels (I'm using x=100 pixels here).
    Then you go to transparent white at x+1 pixels.
    And stay transparent all the way until 100%.

    this should work in browsers that support CSS3.

提交回复
热议问题