Mit der Entwicklung von CSS3 hat sich der Fortschritt der Webentwicklung in Richtung der perfekten Vorstellungskraft bewegt. Für Text und andere Verwendungszwecke kann CSS-Drop-Shadow eine gut aussehende Effektbox erzielen. Schauen wir uns den spezifischen Code direkt an.
Dies ist der HTML-Teil:
<div id="beauty-boxes">Some example text</div>
CSS-Code
#beauty-boxes{
transition: all 0.5s ease;
position:relative;
float:left;
width:45%;
padding:2px;
margin:3px;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
-moz-border-radius:4px;
border-radius:4px;
}
#beauty-boxes:before,
#beauty-boxes:after {
content:"";
position:absolute;
z-index:-3;
bottom:15px;
left:12px;
width:50%;
height:20%;
max-width:350px;
max-height:90px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
#beauty-boxes:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}.beauty-boxes p {
font-size:16px;
font-weight:bold;
}
#beauty-boxes:hover{
background-color:#161616;
color:#fff;
}Der Effekt ist wie folgt:
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen speziellen einseitigen CSS-Box-Effekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
