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: '';
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
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!
