Example of using css3 linear-gradient to achieve shopping cart address selection envelope effect

You must be familiar with the CSS3 gradient front-end children's shoes. In some e-commerce websites, the address selection will be made into an envelope style in order to beautify it (I personally feel that it is very gruel~). After looking at its implementation, most of them are based on Picture, with an optimization mentality, try to use css3 linear-gradient to achieve the envelope effect. Here is the rendering

Let’s start~

The structure of html is as follows:

                                                                                                                                                                                                                                                                                                ;        
padding
: 5px                                                                         using using using using using using using using   using using     through out using ’ 's ’ ‐       ‐     ‐ ‐sizing: border‐box; 100%;
​

background

: #fbfaf5;

}

The gradient is written on the letter-box, and then the letter-border uses color to cover the middle part.

Next we write the gradient for the letter-box. First, let’s analyze the gradient above the picture. There are actually three colors: white, red and blue. We all know that when using linear-gradient, in addition to defining the angle of the gradient at the beginning, we also need to define the color and the proportion of the color. We already know the color, so now let's talk about how to determine this ratio. Observing the renderings, we can find the pattern of one red, one white, one blue, and one white as a
cycle
, then our pattern number is 4, and our proportion is 100%/ (Our regular number * 2) = 12.5% ​​is our ratio. Explain why we use our regular number * 2. Shouldn't it be that the regular number is a combination? NO! Put the color of a combination number inside a cube. In order to facilitate everyone's understanding, I made a rendering



This should be very intuitive. We regard the big box as Just repeat in small cube units
.letter-box{

width: 278px;

height: 176px;

padding: 5px;

box-sizing: border-box;

background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%, #f25953 50%,#f25953 62.5%,#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);

            background-size : 70px 70px;

}

The above is the detailed content of Example of using css3 linear-gradient to achieve shopping cart address selection envelope effect. For more information, please follow other related articles on the PHP Chinese website!