Je crée une image d'arrière-plan à l'aide de gradients linéaires. Comment ajouter des angles ronds pour chaque gradient linéaire.
veuillez fournir une solution sans aucune modification de HTML fort> (ne peut pas utiliser plus d'un div) p> P>
<div class="myStyle"></div>
3 Réponses :
Peut-être essayez peut-être cette approche au lieu de faire une sortie divisée de plusieurs boîtes à gradient?
p>
<div class="myStyle"></div>
Cela ne fonctionne que si un gradient linéaire est présent. Cela ne fonctionne pas pour plusieurs gradients linéaires. Aidez-moi s'il vous plaît à fournir une solution pour un divien-ci lui-même.
Pas vraiment sûr quel est votre objectif, mais si vous voulez une gradient avec une couleur unie pour avoir un rayon, vous pouvez la construire à l'aide de plusieurs dégradés linéaires et de dégradé radial.
Voici un exemple où j'utilise la variable CSS pour définir facilement la position, la taille et le rayon. C'est l'un de vos dégradés. Vous devez répéter le code pour tout le gradient et ajuster les différentes valeurs. P>
p>
<div class="box"></div> <div class="box" style="--w:80px;--r:30px;--c:red;"></div> <div class="box" style="--h:80px;--r:40px;--x:5px;--y:5px;--c:blue"></div>
@Kaiido Vous ne voyez pas le dégradé radial? ou vous ne voyez aucun gradient?
@Kaiido Nous traitons probablement d'un bug ou d'un manque de soutien. Je viens de tester avec un appareil Android et cela semble bien.
@Kaiido L'OP veut avoir un gradient avec un rayon de frontière, donc j'ai construit son gradient à l'aide de plusieurs dégradés et dans son code, il utilise 60px (code> 0 pour les valeurs qui produiront couleurs solides (essentiellement rectangles). Je ne sais pas ce que veulent ce que tu veux, mais pour moi, c'est comme s'il veut de nombreux rectangles avec le rayon et je lui montre comment en construire un puis il doit dupliquer le code.
Ok maintenant je suis sur un ordinateur, je peux voir mieux désolé pour le gâchis alors. Donc, même si techniquement "
@Kaiido J'ai aussi des idées pour le faire travailler avec un véritable dégradé, mais ce serait un effort gaspillé si ce n'est pas ce que veut le choisi ou je l'ajouterai probablement plus tard pour rendre la réponse plus générique.
semble que vous devrez enfin faire cet effort enfin ; - )
OP requis: chaque barre rectangulaire avec coins ronds (sans modification de HTML)
Le plus propre pourrait en réalité utiliser SVG pour cela au lieu de gradients CSS-CSS.
Vous le chargerez comme un Data-UriR dans la propriété de fond-image.
Pour faire le coin arrondi, vous pouvez utiliser le rx code> et Ry attributs du code> élément.
Pour faire les dégradés, vous pouvez utiliser SVG's éléments. p>
p>
<div class="mystyle"></div>
Avez-vous besoin que cela ne soit que des blocs de couleurs solides ou avez-vous besoin de ces couleurs dégradés?
couleurs gradient