在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样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对于背景色透明的元素依然是起作用的。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。