css怎么设置阴影效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css怎么设置阴影效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2304字，纯文字阅读大概需要4分钟。

内容图文

css设置阴影效果：1、通过主元素和副元素的阴影效果叠加产生曲线阴影效果；2、通过添加两个副元素，并将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形，然后遮盖在主元素下面来实现翘边阴影效果。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

曲线阴影：

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

第一步：

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

第二步：

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

HTML:

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

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视频教程】

css

.box{
    width: 980px;
    height: auto;
    clear: both;
    overflow: hidden;
    margin: 20px auto;
}
.box li{
    width: 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;
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before{
    content: '';
    z-index: -1;
    position: absolute;
    width: 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;
    width: 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);
}

以上就是css怎么设置阴影效果的详细内容。

内容总结

以上是互联网集市为您收集整理的css怎么设置阴影效果全部内容，希望文章能够帮你解决css怎么设置阴影效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端