CSS Shadow Box Bas uniquement [double]
-
14-10-2019 - |
Question
Cette question a déjà une réponse ici:
- ombre ne fond css3 14 réponses
Comment puis-je faire cela? Je veux que mon élément à regarder comme si elle a souligné l'ombre. Je ne veux pas l'ombre pour les 3 autres côtés.
La solution
Pour ce faire:
box-shadow: 0 4px 2px -2px gray;
Il est en fait beaucoup plus simple, tout ce que vous définissez le flou (3ème valeur), réglez la propagation (4e valeur) à la borne négative de celui-ci.
Autres conseils
On peut utiliser deux éléments, l'un dans l'autre, et donner à l'une extérieure overflow: hidden
et une largeur égale à l'élément intérieur avec un rembourrage de fond de telle sorte que l'ombre sur tous les autres côtés sont « cut off »
#outer {
width: 100px;
overflow: hidden;
padding-bottom: 10px;
}
#outer > div {
width: 100px;
height: 100px;
background: orange;
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
En variante, l'élément flottant extérieur pour l'amener à se rétrécir à la taille de l'élément intérieur. Voir: http://jsfiddle.net/QJPd5/1/
Essayer cette
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
Vous pouvez le voir dans http://jsfiddle.net/wJ7qp/
essayer d'obtenir la boîte ombre sous votre contrôle total.
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
cela s'appliquerait à la boîte-ombre extérieure ainsi.