div { width:200px; height:200px; border:1px solid #ccc; position: relative; background-color:#fff; float: left; text-align: center; margin: 30px;}.div1::after { z-index: -15; position: absolute; content: ""; bottom: 14px; right: 7px; width: 36%; top: 59%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #A5A5A5; -webkit-transform: rotate(3deg);}.div1::before { z-index: -15; position: absolute; content: ""; bottom: 14px; left: 6px; width: 36%; top: 59%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #A5A5A5; -webkit-transform: rotate(-3deg);}.div2 { border-bottom-right-radius: 50px; box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);}.div2::after { content: ''; width: 22px; height: 22px; position: absolute; bottom: 0px; right: 0px; border-radius: 0 0 16px 0; box-shadow: -2px -2px 5px rgba(65, 65, 65, 0.38); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-10px,-10px);}.div3 { border-radius: 60px / 5px;}.div3::after { z-index: -15; position: absolute; content: ""; bottom: 2px; left: 4%; width: 91%; height: 10px; max-width: 300px; background: #777; box-shadow: 0px 4px 11px 1px #A5A5A5; border-radius: 50%;}.div3::before { z-index: -15; position: absolute; content: ""; left: 4%; width: 91%; height: 10px; top: 4px; max-width: 300px; background: #777; box-shadow: 0px -4px 11px 1px #A5A5A5; border-radius: 50%;}
123
查看更多关于css伪类beforeafter实现立体效果_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did104931