Detaillierte Erklärung des CSS3-Schattens

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von CSS3-Schatten zu beachten sind.

box-shadow
Parameter:
h-shadow (erforderlich): die Position des horizontalen Schattens, negative Werte sind zulässig
v-shadow (erforderlich): die Position von der vertikale Schatten, negative Werte sind erlaubt
Unschärfe (optional): Unschärfeabstand
Spreizung (optional): Größe des Schattens
Farbe (optional): Farbe des Schattens
Einsatz (optional): äußerer Schatten (Anfang) Wechsel zum inneren Schatten
zB:

<style>
   .effect{
       position: relative;
       width: 800px;
       height: 200px;
       background-color: #fff;
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3)
       ,0px 0px 40px rgba(0,0,0,0.1) inset;  //水平和垂直阴影的值都设置为0，阴影会从中间发散至四周。
   }
    .effect:after,.effect:before{
        position: absolute;
        content: &#39;&#39;;
        background: #fff;
        top:50%;
        bottom:0;
        left: 10px;
        right: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
        z-index: -999;
        border-radius: 100px/10px;
   }</style><div class="effect"></div>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für mehr Spannendes Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung von Require.js

Verwendung von JS zur Implementierung des Sortieralgorithmus

Javascripts Singleton-Modus

So verwenden Sie reguläre Ausdrücke in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des CSS3-Schattens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!