Je veux ajouter une ombre de boîte à gauche et à droite d'un div, ici je joins une image pour cela, je ne sais pas comment faire cela, quelqu'un peut-il m'aider s'il vous plaît? s'il vous plaît noter que l'ombre devrait être à la marque de point à gauche et à droite. 
ombre de la boîte à gauche et à droite
Espérons que cela vous apporte ce dont vous avez besoin. La documentation de la propriété box-shadow se trouve Here on MDN.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background-color: pink;
height: 100%;
padding: 10px;
}
.content {
width: 85%;
margin: 0 auto;
box-sizing: border-box;
height: calc(100% - 10px);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3);
background-color: white;
}<div class="container">
<div class="content">
Hello
</div>
</div>mais mon exigence est différente ... s'il vous plaît regardez cette image de près – phpLover
expliquez-moi comment il est différent, aussi s'il vous plaît noter que je suis _very_ daltonien donc le plus précis vous êtes le meilleur. – Jhecht
ok..actuellement l'ombre doit être sur le côté gauche et droit seulement .J'ai marqué un point sur les deux côtés, jusqu'à ce point j'ai besoin d'ombre du fond et l'ombre commence à partir de près de 10% du fond. – phpLover
body {
background-color: red;
}
.boxWrapper {
height: 100%;
overflow: hidden;
margin: 30px auto;
width: 500px;
padding: 0 60px;
}
.box {
position: relative;
border-radius: 3px;
padding: 20px;
min-height: 300px;
background-color: #fff;
}
.box:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(-8deg);
left: 20px;
background-color: transparent;
box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3);
}
.box:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(8deg);
right: 20px;
background-color: transparent;
box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3);
}<div class="boxWrapper">
<div class="box">
box
</div>
</div>C'est donc sans aucun doute une question propre. J'ai joué et j'ai pu au moins trouver un tremplin vers la bonne solution. Je l'ai fait avec la méthode box-shadow qui a été mentionnée, mais je l'ai ajoutée à un pseudo-sélecteur :after et :before.
Ensuite, j'ai fait pivoter ces deux sélecteurs de 8 degrés (juste pour imiter l'image fournie) et j'ai constaté qu'il restait une ombre non désirée au-dessus de l'élément et au-dessous de l'élément. Pour résoudre ce problème, j'ai enveloppé la boîte avec une boîte d'emballage qui avait pour seul but de définir la taille de la boîte ainsi que de cacher tout débordement sur les hauts et les bas.
Il faudra certainement l'adapter à la façon dont vous en avez besoin, car il se sent un peu hacky. Mais je pense que cela fournit quelques idées sur la façon d'aborder le problème.
J'ai créé un Codepen pour que vous puissiez le voir au travail. http://codepen.io/RyanAaronGreen/pen/Kagdad
J'avais aussi tripoté les sélecteurs ':: before' et' :: after', c'est vraiment une question très intéressante. Cela dit, si j'étais OP, je choisirais probablement votre réponse. – Jhecht
@phpLover - avez-vous déjà eu votre réponse à celle-ci? Je continue à rencontrer ce problème en regardant mes réponses précédentes. –
Utiliser cet échantillons CSS3 drop shadow
que vous recherchez la propriété CSS 'boîte shadow'. Vous pouvez définir plus d'une ombre de boîte en y ajoutant une virgule. – Jhecht