How to achieve a special one-sided css box effect
This article mainly introduces how to achieve a special one-sided css box effect, the article introduces in great detail, has a certain reference value, interested friends must read it!
This is the html section:
Someexampletext
CSS code
# beauty-boxes {
Transition:all0.5sease
Position:relative
Float:left
Width:45%
Padding:2px
Margin:3px
Background:#fff
-webkit-box-shadow:01px4pxrgba (0re0re0j0re0), 0040pxrgba (0jor0re0re0d0re0) inset
-moz-box-shadow:01px4pxrgba (0re0re0re0rem 0.3), 0040pxrgba (0jorg0re0re0pc0re0) inset
Box-shadow:01px4pxrgba (0rem 0rem 0.3), 0040pxrgba (0je 0rem 0rem 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:015px10pxrgba (0. 0. 0)
-moz-box-shadow:015px10pxrgba (0. 0. 0)
Box-shadow:015px10pxrgba (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-boxesp {
Font-size:16px
Font-weight:bold
}
# beauty-boxes:hover {
Background-color:#161616
Color:#fff
}
The above is all the content of the article "how to achieve a special one-sided css box effect". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
