码迷,mamicode.com
首页 > Web开发 > 详细

web前端入门到实战:css实现不规则图形的阴影(如对话框)

时间:2020-01-18 01:31:49      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:添加   height   入门   背景   技术   方法   弹出对话框   分享   箭头   

在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性,filter下的drop-shadow。

<div class="triangle">
</div>
.triangle{
    width: 200px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0 0 5px #ccc);
    background-color: #fff;
}
.triangle:after{
    content: "";
    position: absolute;
    left: 20px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)

效果图:

技术图片

相同情况下,换成box-shadow,效果图:

技术图片

即伪类构造的三角并不在阴影范围内。

回到drop-shadow,将三角的位置下移到和主体完全隔离

<pre>

.triangle{
    width: 200px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0 0 5px #ccc);
    background-color: #fff;
}
.triangle:after{
    content: "";
    position: absolute;
    left: 20px;
    bottom: -50px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    transform: rotate(45deg);
}

效果图:

技术图片

即,drop-shadow是改元素整体轮廓(包括子元素)的阴影。这对于我们给复杂图形赋予阴影效果提供了很大的帮助。

PS:更接近于真正的阴影,drop-shadow对背景色透明的元素不起作用。而box-shadow对于背景色透明的元素依然是起作用的。

web前端入门到实战:css实现不规则图形的阴影(如对话框)

标签:添加   height   入门   背景   技术   方法   弹出对话框   分享   箭头   

原文地址:https://blog.51cto.com/14592820/2467586

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!