Box-shadow nur rechts und Links

Ich brauche, um eine box-shadow nur auf der rechten und linken Seite ein element. Es sollte verblassen und dünner werden, um oben und unten. Es sollte auch nicht oveflow oben und unten.

Das Hauptproblem ist, dass ich kann nicht verhindern, dass der Schatten, der überlauf an der Oberseite und der Unterseite des Elements.

Dies ist, was ich habe :

HTML :

<div></div>

CSS :

div{
    box-shadow: 0px 0px 20px 0px #000000;
}

"Ein Rechteck" ist nicht wirklich ungewöhnlich für einen <div>...
Ich brauche einen Schatten der linken und rechten Seite ein div...
Versuchen Sie dies : paulund.co.uk/erstellen-verschiedene-css3-box-Schatten-Effekte

InformationsquelleAutor Gopikrishna | 2014-06-27

13

Benötigen Sie zwei box-Schatten, eine für die Schatten Links und eine für rechts. Sie müssen angeben, box-Schatten, die in der gleichen box-shadow Attribut und trennen Sie diese mit Koma :
```
box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
```
Brauchen beide, um eine negative spread-Wert, so dass Sie kürzer sind als die divs Höhe und nicht überlaufen, oben und unten.

DEMO

Ausgabe :

Müssen Sie zwicken die Werte des Schattens, um es anpassen, um die Größe des Elements, die Sie verwenden möchten.

HTML :
```
<div></div>
```
CSS :
```
div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}
```
InformationsquelleAutor web-tiki
1

Sind Sie gehen zu müssen, zu gehen, um Bilder für Ihre Schatten. Was ich meine ist, das Links und rechts 'Schatten' gehen zu müssen, um zwei Bilder, die können Sie dann die position auf die Kanten des div-Effekt zu erstellen. Ich natürlich nicht testen, und es müssen möglicherweise ein wenig Feintuning, aber Sie müssen, um etwas wie das hier tun:
```
<style>
    .weird-image{
        height: 100px;
        width:100px;
        position: relative; /* do this so the absolutely positiond imgs are relative to this container */
    }

    .weird-image-left-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        left:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }

    .weird-image-right-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        right:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }
</style>
<div class="weird-image">
    <img class="weird-image-left-shadow" src="left-shadow.png"/>
    <img class="weird-image-right-shadow" src="right-shadow.png" />
    <p>My Actual Div Content</p>
</div>
```
wenn ich Bild Schatten nicht die richtige, wenn das Gehalt erhöht.. in meinem Fall werden Inhalte dynamisch...
Und ich sehe Kommentare über die Verwendung von CSS3-Schatten. Möglich, aber es wird schwieriger sein, zu erhalten eine box-shadow zu suchen, genau wie Sie es wollen, plus Sie haben nicht die Wirkung die gleiche in allen Browsern, vor allem ältere, wo, das würde nicht zeigen, bis überhaupt. Ich möchte sehen, wie es mit reinem CSS aber.
Sie könnte ein container-element mit overflow-y:hidden;. Brauchen Sie ein Bild hoch, und der überlauf einfach nicht zeigen. Was passiert, wenn Sie haben sehr große Inhalte? Tut der Schatten immer breiter für immer?
Ah - ich sehe, es blendet. Das gleiche würde gelten noch immer mit dem container - & overflow-y:hidden.

InformationsquelleAutor p e p
0

Verwenden-Marge zeigen die Schatten
```
div {margin:10px}
```
Blick auf diese

http://jsfiddle.net/nB5F6/4/

haben Sie Lesen die Frage?

InformationsquelleAutor budamivardi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.