在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样不必属性可能不能满足需求。这里推荐一个类似的属性,滤下的下拉阴影。
<代码> & lt; div类=叭切巍北?
& lt;/div>
.triangle {
宽度:200 px;
高度:60 px;
位置:相对;
过滤器:下拉阴影(0 0 5 px # ccc);
background - color: # fff;
}
.triangle:{后
内容:“”;
位置:绝对的;
左:20 px;
底部:-10 px;
宽度:20 px;
高度:20 px;
background - color: # fff;
变换:旋转(45度);
}
专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③——零①②分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(从零基础开始到网络前端项目实战教程,学习工具,全栈开发学习路线以及规划)
效果图:
相同情况下,换成不必,效果图:
即伪类构造的三角并不在阴影范围内。
回到下拉阴影,将三角的位置下移到和主体完全隔离
& lt; pre>
<代码> .triangle {
宽度:200 px;
高度:60 px;
位置:相对;
过滤器:下拉阴影(0 0 5 px # ccc);
background - color: # fff;
}
.triangle:{后
内容:“”;
位置:绝对的;
左:20 px;
底部:-50 px;
宽度:20 px;
高度:20 px;
background - color: # fff;
变换:旋转(45度);
}
效果图:
即,下拉阴影是改元素整体轮廓(包括子元素)的阴影。这对于我们给复杂图形赋予阴影效果提供了很大的帮助。
PS:更接近于真正的阴影,下拉阴影对背景色透明的元素不起作用。而不必对于背景色透明的元素依然是起作用的。
