Hoe maak je schaduw op de rand-onderkant?

Antwoord 4, autoriteit 13%

Nieuwe methode voor een oude vraag

Het lijkt erop dat in de gegeven antwoorden het probleem altijd was hoe de kaderrand zichtbaar zou zijn aan de linker- en rechterkant van het object of dat je het zo ver zou moeten invoegen dat het niet de hele lengte van het object overschaduwde. de container goed.

Dit voorbeeld gebruikt het pseudo-element :aftersamen met een lineair verloop met transparantie om een ​​slagschaduw op een container te plaatsen die zich precies uitstrekt tot aan de zijkanten van het element dat u wilt overschaduwen.

Het is vermeldenswaardbij deze oplossing dat als u opvulling gebruikt op het element dat u schaduw wilt laten vallen, het niet correct wordt weergegeven. Dit komt doordat het pseudo-element afterde inhoud direct achter de innerlijke inhoud van het element voegt. Dus als je opvulling hebt, verschijnt de schaduw in de doos. Dit kan worden ondervangen door opvulling op de buitenste container (waar de schaduw van toepassing is) te verwijderen en een binnencontainer te gebruiken waar u de benodigde opvulling aanbrengt.

Voorbeeld met opvulling en achtergrondkleur op de geschaduwde div:

Als u de diepte van de schaduw wilt wijzigen, vergroot u gewoon de stijl heightin het pseudo-element after. Je kunt natuurlijk ook kleuren donkerder, lichter maken of veranderen in de lineaire verloopstijlen.

body {
  background: #eee;
}
.bottom-shadow {
  width: 80%;
  margin: 0 auto;
}
.bottom-shadow:after {
  content: "";
  display: block;
  height: 8px;
  background: transparent;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.bottom-shadow div {
  padding: 18px;
  background: #fff;
}

<div class="bottom-shadow">
  <div>
    Shadows, FTW!
  </div>
</div>

.border {
  background-color: #ededed;
  padding: 10px;
  margin-bottom: 5px;
}
.border-top {
  box-shadow: inset 0 3px 0 0 cornflowerblue;
}
.border-right {
  box-shadow: inset -3px 0 0 cornflowerblue;
}
.border-bottom {
  box-shadow: inset 0 -3px 0 0 cornflowerblue;
}
.border-left {
  box-shadow: inset 3px 0 0 cornflowerblue;
}

<div class="border border-top">border-top</div>
<div class="border border-right">border-right</div>
<div class="border border-bottom">border-bottom</div>
<div class="border border-left">border-left</div>

   .shadow {
        width:100%;
        height:1px; // = "border height (without the shadow)!"
        background:#000; // = "border color!"
        -webkit-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
        -moz-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
        box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"

box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);