css做盒子的曲边阴影和翘边阴影

    盒子的曲边阴影,翘边阴影的区别是:曲边阴影看起来盒子下边像是有个曲边。而翘边阴影是往两边翘。两者的本质就是累加,就是看着像是一个盒子的阴影,其实是多个盒子累加起来的阴影,只是其他的看不见,只有shadow。

    这个是好久以前跟着慕课网的老师学的,正好现在整理下。下图是直接的感受,要仔细看才能看到不一样的地方,演示地址
    曲边翘边
    上面一个大图,下边是有阴影的,而且阴影并不是整个的一样,而是两边阴影稍微少点,约往里阴影越明显,到底是咋做的呢,一张图就可以解决。

    曲边阴影

    曲边
    这里就是刚才说的盒子加盒子,外面的大盒子我们看得到,而里面的小矩形,就是隐藏的盒子,大盒子有大盒子的阴影,小盒子有小盒子的阴影,这样一叠加,是不是就是中间阴影更大了呢。

    dom结构

    1
    2
    3
    <div class="wrap effect">
    <h1>Shadow Effect</h1>
    </div>

    css编写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .effect{
    position: relative;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    }
    .effect:after,.effect:before{
    content: "";
    position: absolute;
    top:50%;
    bottom: 0px;
    left:20px;
    right:20px;
    background-color: red;
    border-radius: 100px/10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.3);
    z-index: -1;
    }

    上面还用到了box-shadow的inset,还有after和before,以及要浏览器的各个内核。

    翘边阴影

    原理解析图如下,原理跟上面几乎一样,也是盒子加盒子,唯一不同的是,这次两个盒子不一样,朝向不同的方向,为不同的边加了阴影。

    翘边
    翘边
    dom结构

    1
    2
    3
    4
    5
    <ul class="box">
    <li><img src="images/photo1.jpg" alt="" /></li>
    <li><img src="images/photo2.jpg" alt="" /></li>
    <li><img src="images/photo3.jpg" alt="" /></li>
    </ul>

    css编写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    .box li:before{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    left:21px;
    background: transparent;
    z-index: -2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform:skew(-12deg) rotate(-6deg);
    -webkit-transform:skew(-12deg) rotate(-6deg);
    -moz-transform:skew(-12deg) rotate(-6deg);
    -os-transform:skew(-12deg) rotate(-6deg);
    -o-transform:skew(-12deg) rotate(-6deg);
    }
    .box li:after{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    right:21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform:skew(12deg) rotate(6deg);
    -webkit-transform:skew(12deg) rotate(6deg);
    -moz-transform:skew(12deg) rotate(6deg);
    -os-transform:skew(12deg) rotate(6deg);
    -o-transform:skew(12deg) rotate(6deg);
    }

    这里还用到了css3的变形,transform时元素拉伸并且旋转。由于旋转和拉伸,那个隐形的菱形有一边比较靠近边缘,给他加上阴影,阴影范围比较大时,就会有一部分溢出来了,也就是这里的阴影比较明显,2边4个脚都这样,也就形成了翘起来的边啦。