zoukankan      html  css  js  c++  java
  • CSS--阴影效果

     1.曲线阴影:

    曲线阴影的实现原理是通过阴影的叠加效果产生的。即一个主元素设置阴影后,在主元素下面再添加一个副元素。使副元素和主元素重合,且副元素为一个弧形元素。此时主元素和副元素的阴影效果叠加产生曲线阴影。

    第一步:

    为主元素添加内部阴影,v和h方向的大小都设置为0,但是模糊半径设置的要较大,从而实现主元素内部的阴影效果。

    第二步:

    此时副元素需要变换的属性有:添加到主元素层级的下层,通过z-index来实现;在主元素后面或者前面添加副元素;副元素需要变换为弧形:border-radius:100px/10px;通过绝对定位确定副元素的位置;为副元素添加阴影。

     HTML:

    <div class="wrap effect">
            <h1>Shawdow Effect</h1>
        </div>

    CSS:

    .effect{
        position: relative;
        box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 50px #ddd inset;
    }
    .effect:after,.effect:before{
        content: '';
        background: #fff;
        position: absolute;
        z-index: -1;
        left: 10px;
        right: 10px;
        top:50%;
        bottom: 0px;
        border-radius: 100px/10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    二.翘边阴影:

    翘边阴影的原理和曲线阴影是差不多的,但是翘边阴影却用到了扭曲和旋转两个属性。翘边阴影在左边和右边也是添加两个副元素,然后将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形,然后遮盖在主元素下面。

    css

    .box{
         980px;
        height: auto;
        clear: both;
        overflow: hidden;
        margin: 20px auto;
    }
    .box li{
         300px;
        height: 210px;
        float: left;
        background: white;
        margin: 20px 10px;
        border: 2px solid #efefef;
        box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
        position: relative;
    }
    .box li img{
        display: block;
         290px;
        height: 200px;
        margin: 5px;
    }
    .box li:before{
        content: '';
        z-index: -1;
        position: absolute;
         90%;
        height: 80%;
        left: 20px;
        bottom: 8px;
        background:transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,0.6);
        transform: skew(-12deg) rotate(-4deg);
    }
    .box li:after{
        content: '';
        z-index: -1;
        position: absolute;
         90%;
        height: 80%;
        right: 20px;
        bottom: 8px;
        background:transparent;
        box-shadow: 0 8px 20px rgba(0,0,0,0.6);
        transform: skew(12deg) rotate(4deg);
    }
  • 相关阅读:
    layout_alignStar 与 android:layout_alignEnd
    Java学习过程中的一些知识点
    L1-054 福到了->团体程序设计天梯赛-练习集
    JS冒号的作用
    JS中(function(){xxx})(); 这种写法是什么意思?
    去除vue上方的60px空白
    vue-cli · Failed to download repo vuejs-templates/webpaack: Response code 404
    Windows 7 MBR的修复与Linux产品正确卸载
    折腾一天安装Centos7,以及后面恢复Win7引导的曲折历程
    Windows 7硬盘安装CentOS 6.4 双系统 (WIN7下硬盘安装Linux(Fedora 16,CentOS 6.2,Ubuntu 12.04))
  • 原文地址:https://www.cnblogs.com/moxuexiaotong/p/6985249.html
Copyright © 2011-2022 走看看