web-dev-qa-db-fra.com

Ajouter une ombre de boîte CSS autour de la DIV

Est-il possible que l'ombre entoure la division entière?

-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;

Je sais que l'ordre des attributs va:

  • Décalage horizontal
  • Décalage vertical
  • Rayon de flou
  • Couleur

Mais je me demande s’il est possible de faire en sorte que l’ombre soit omniprésente au lieu d’être visible uniquement sur un bord ou un côté.

csscss3
52
Warface

Juste zéro les compensations?

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
110
BoltClock

Oui, ne décalez pas verticalement ou horizontalement et utilisez un rayon de flou relativement grand: violon

En outre, vous pouvez utiliser plusieurs ombres de boîte si vous les séparez par une virgule. Cela vous permettra d’affiner l’affichage où ils sont flous et leur étendue. L'exemple que je fournis est identique à celui d'une grande variable outline, mais il peut être affiné considérablement davantage: fiddle

Vous avez manqué la dernière propriété la plus pertinente de box-shadow, qui est spread-distance. Vous pouvez spécifier une valeur pour l’agrandissement ou la contraction de l’ombre (rend mon deuxième exemple obsolète): fiddle

La liste complète des propriétés est:

box-shadow: [décalage-horizontal] [décalage-vertical] [rayon de flou] [distance-propagation] [couleur] incrusté?

Mais encore mieux, lisez la spec .

15
zzzzBov

Utilisez simplement le code ci-dessous. Il va ombrager toute la DIV

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

J'espère que ça va marcher

5
Priyanka Thakur

Utilisez ce code ci-dessous

 border:2px soild #eee;

 margin: 15px 15px;
 -webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;

Explication:-

box-shadow nécessite que vous définissiez les décalages horizontaux et verticaux; vous pouvez ensuite éventuellement définir le flou et la couleur, vous pouvez également choisir d'avoir l'ombre insérée au lieu du décalage par défaut. La couleur peut être définie comme hex ou rgba .

box-shadow : inset/outset h-offset v-offset flou couleur étalée; 

Explication des valeurs ... 

inset/outset - si l'ombre est à l'intérieur ou à l'extérieur de la boîte. S'il n'est pas spécifié, il sera défini par défaut.

h-offset - l'offset horizontal de l'ombre (valeur requise)

v-offset - le décalage vertical de l'ombre (valeur requise)

flou - comme il est dit, le flou de l'ombre

spread - éloigne l'ombre de la boîte de manière égale sur tous les côtés. Une valeur positive provoque l’agrandissement de l’ombre, une négative l’efface. Bien que cette valeur ne soit pas souvent utilisée, elle est utile avec plusieurs ombres. 

couleur - comme il est dit, la couleur de l'ombre

Usage

box-shadow: 2px 3px 8px #eee; une ombre grise avec un décalage horizontal de 2 pixels, une verticale de 3 pixels et un flou de 8 pixels

1
Narendra Reddy

Le code CSS serait:

box-shadow: 0 0 10px 5px white;

Cela occultera la DIV entière, peu importe sa forme!

0
Dan Marichal
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Utilisez ceci en survol pour voir son effet réel, cela donnera à border & shadow le partage .. 

0
user10884045