So erzielen Sie einen speziellen einseitigen CSS-Box-Effekt (Codebeispiel)

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!