Exemple d'utilisation du dégradé linéaire CSS3 pour obtenir un effet d'enveloppe de sélection d'adresse de panier

Vous devez être familier avec les chaussures pour enfants front-end dégradées CSS3. Dans certains sites de commerce électronique, la sélection de l'adresse sera faite dans un style enveloppe afin de l'embellir (je trouve personnellement que c'est très fastidieux~) . Après avoir regardé sa mise en œuvre, la plupart d'entre eux sont basés sur Sous forme d'images, avec une mentalité d'optimisation, j'essaie d'utiliser le dégradé linéaire css3 pour obtenir l'effet d'enveloppe

Commençons~

La structure html est la suivante :

                                                                          >                                                                                         hauteur :                                                                                                            hauteur :                                                                                                                                                                                                                                  .
Ensuite, nous écrivons le dégradé de la boîte aux lettres. Tout d'abord, analysons le dégradé au-dessus de l'image. Il y a en fait trois couleurs : blanc, rouge et bleu. Nous savons tous que lors de l'utilisation d'un dégradé linéaire, en plus de définir l'angle du dégradé au début, nous devons également définir la couleur et la proportion de la couleur. Nous connaissons déjà la couleur, alors parlons maintenant de la façon de le faire. déterminer ce rapport.
En observant les rendus, nous pouvons trouver le motif d'un rouge, un blanc, un bleu et un blanc comme un
cycle
, alors notre numéro de motif est 4, et notre proportion est 100 %/ (Notre nombre régulier * 2) = 12,5% ​​est notre ratio. Expliquez pourquoi nous utilisons notre nombre régulier * 2. Ne devrait-il pas être que le nombre régulier soit une combinaison ? NON ! Mettez la couleur d'un numéro de combinaison à l'intérieur d'un cube. Afin de faciliter la compréhension de chacun, j'ai fait un rendu

Cela devrait être très intuitif. comme Répétez simplement par petites unités cubiques

.letter-box{ width: 278px; height: 176px;
padding: 5px;
box-sizing : border-box;
arrière-plan : dégradé linéaire (45 degrés,#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%); >

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!