zoukankan      html  css  js  c++  java
  • 一个div 实现纸张阴影效果

    .box {
                    position: relative;
                    width: 250px;
                    height: 150px;
                    border: 1px solid #efefef;
                    margin: 100px auto;
                    background: #fff;
                    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                }
                
                .box:before,
                .box:after {
                    content: '';
                    z-index: -1;
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    width: 70%;
                    max-width: 300px;
                    /* avoid rotation causing ugly appearance at large container widths */
                    max-height: 100px;
                    height: 55%;
                    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                    -webkit-transform: skew(-15deg) rotate(-6deg);
                    -moz-transform: skew(-15deg) rotate(-6deg);
                    -ms-transform: skew(-15deg) rotate(-6deg);
                    -o-transform: skew(-15deg) rotate(-6deg);
                    transform: skew(-15deg) rotate(-6deg);
                }
                
                .box:after {
                    left: auto;
                    right: 10px;
                    -webkit-transform: skew(15deg) rotate(6deg);
                    -moz-transform: skew(15deg) rotate(6deg);
                    -ms-transform: skew(15deg) rotate(6deg);
                    -o-transform: skew(15deg) rotate(6deg);
                    transform: skew(15deg) rotate(6deg);
                }
  • 相关阅读:
    《Python 学习手册4th》 第十一章 赋值、表达式和打印
    《Python 学习手册4th》 第十章 Python语句简介
    视图
    表约束
    表值参数
    表操作
    MSSQL数据批量插入优化详细
    SQL Server表分区
    表分区中的分区交换
    maven命令和maven插件
  • 原文地址:https://www.cnblogs.com/xzma/p/7575061.html
Copyright © 2011-2022 走看看