Que faisons-nous avec les ombres-boîtes-tutoriel CSS-php.cn

Que faisons-nous avec les ombres-boîtes

Linda Hamilton

Libérer： 2024-12-29 14:29:11

original

809 Les gens l'ont consulté

De temps en temps, j'obtiens une "phase CSS". Le dernier en date a commencé lorsque j'ai découvert CSSBattle. Ce site Web présente des défis quotidiens où vous devez reproduire une image avec CSS avec le moins de caractères possible. Je suis horrible, extrêmement verbeux, mais je dois dire que je suis devenu obsédé.

L'une de mes choses préférées est de regarder les solutions des autres, et c'est ainsi que j'ai découvert que mes autres collègues css-battlers utilisaient beaucoup box-shadow là-bas, et puis je suis devenu très curieux à ce sujet. Ils utilisent essentiellement cette propriété pour reproduire un retangle pour toujours et à jamais. Je vais vous montrer comment.

La propriété box-shadow

Il y a beaucoup d'aménagements pour cette propriété, selon la documentation. Mais celle que nous utilisons ici est la couleur en haut à gauche. Ainsi, par exemple :

What we do with the box-shadows

(Objectif quotidien CSSBattle pour le 16/11/2024)

Dans cette image, nous ne voyons qu'un seul div ; les autres sont des ombres. Ainsi, le html sera :

<html>
   <body>
       <div></div>
   </body>
</html>

Copier après la connexion

Le CSS sera :

* {
   background: #6592CF;
   position: absolute;
 }

div {
   top: 52px;
   left: 52px;
   width: 70px;
   height: 30px;
   background: #EEB850;
   box-shadow:
       0 75px #243D83, 0 150px #EEB850,
       105px 0 #243D83, 210px 0 #EEB850,
       105px 75px #EEB850, 210px 75px #243D83,
       105px 150px #243D83, 210px 150px #EEB850;
}

Copier après la connexion

Notez que les propriétés du haut et de gauche sont en px et que les distances sont relatives à la première.

Peut-être que je suis le seul, mais je pense que c'est très intéressant. Je vais continuer mes études en CSS et je vous laisserai si je trouve d'autres trucs sympas.

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!