Longue histoire courte:

Vidéo Youtube => Batailles CSS => Je visite https://cssbattle.dev/play/1 = > J'ai trouvé ça intéressant => Défi n ° 1 résolu (Super facile) => Google Meilleure réponse après avoir regardé les résultats => Mes pensées après avoir regardé le meilleur => solution <= {" Suis-je sérieusement un codeur "," Est-ce vraiment CSS "," Existe-t-il des trous noirs? " }, Mais à part les blagues, la meilleure solution mentionnée ci-dessous m'a fait comprendre pourquoi ne suis-je pas au courant d'une telle chose?

Le site Web cssbattles affiche une image et demande au challenger de reproduire exactement la même chose avec html et css avec une précision exacte. La solution avec le moins de personnages gagne (Winner revendique toute la gloire).

Défi entrez la description de l'image ici

La solution

<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>

(Je n'ai simplement aucune idée de ce que signifie la ligne mentionnée ci-dessus)

Trouvé cette réponse à https://dev.to/pheeria/css- bataille-1-simplement-carré-c19

Peut-être que je suis noob en CSS, mais j'ai essayé de le rechercher sur Internet mais je n'ai pas trouvé la réponse dont j'avais besoin.

Je pensais que c'était peut-être juste une propriété abrégée pour les choses que j'ai trouvées ici sur MDN Web Docs ou ici sur CSS-Tricks . Mais je n'ai pas pu obtenir ce que je cherchais malgré mes tentatives de changement et de test des valeurs.

Remarque: la réponse à une telle question peut exister et peut avoir plusieurs instances de la même chose déjà disponibles sur le débordement de pile lui-même, alors veuillez ignorer mon incapacité à rechercher des réponses et m'aider avec des réponses ou des liens vers des solutions existantes.

Quelqu'un peut-il expliquer quel est ce code?

Merci d'avance

-1
IVAN PAUL 23 févr. 2021 à 18:40

1 réponse

Meilleure réponse

RÉPONSE: Les avantages sont laids et semblent être un moyen d'enregistrer les guillemets dans l'attribut pour rendre le code le plus court possible en tant qu'attribut en ligne - Non recommandé car il peut ne pas fonctionner dans tous les navigateurs.

Détails sur le code

Ombre de la boîte MDN

La propriété Box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Une ombre de boîte est décrite par des décalages X et Y par rapport à l'élément, le flou et le rayon de propagation et la couleur.

Ombre de la boîte CSS-Tricks

boîte-ombre: [décalage horizontal] [décalage vertical] [rayon de flou] [rayon d'étalement facultatif] [couleur];

span {
box-shadow: 0+0+0+2in #b5e0ba, /* 2" green spread */
            0+0+0+5in #5d3a3a  /* 5" brown spread */  
}            
<span>Hello</span>

En chrome Identique à

span {
box-shadow: 0 0 0 2in #b5e0ba, /* 2" green spread */
            0 0 0 5in #5d3a3a  /* 5" brown spread */  
}
<span>Hello</span>
0
mplungjan 24 févr. 2021 à 06:52