阿坝州网站建设公司

web前端入门到实战：css实现不规则图形的阴影（如对话框）-创新互联

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

创新互联网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，成都做网站、成都网站设计，塑造企业网络形象打造互联网企业效应。



.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前端项目实战教程，学习工具，全栈开发学习路线以及规划）

效果图：

web前端入门到实战：css实现不规则图形的阴影（如对话框）

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

web前端入门到实战：css实现不规则图形的阴影（如对话框）

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

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

.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);
}


效果图：
web前端入门到实战：css实现不规则图形的阴影（如对话框）
即，drop-shadow是改元素整体轮廓（包括子元素）的阴影。这对于我们给复杂图形赋予阴影效果提供了很大的帮助。
PS：更接近于真正的阴影，drop-shadow对背景色透明的元素不起作用。而box-shadow对于背景色透明的元素依然是起作用的。
                

                网站题目：web前端入门到实战：css实现不规则图形的阴影（如对话框）-创新互联                

                文章路径：http://azwzsj.com/article/iegjp.html

其他资讯