css实现不规则图形的阴影(如对话框)

更新日期: 2019-08-25阅读: 2.9k标签: 阴影

在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样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);
}

效果图:


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


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

回到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);
}

效果图:


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

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


链接: https://www.fly63.com/article/detial/5000

CSS阴影效果的比较:drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影

CSS 阴影动画优化技巧

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

CSS中使用文本阴影与元素阴影

在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影、垂直阴影、(清晰度或模糊距离)、阴影颜色。text-shadow属性值说明,在文本阴影实践中:第一个值是设置阴影水平方向移动

css怎么设置阴影边框?

在CSS中可以使用阴影效果属性在HTML文档中添加边框(图像)阴影。下面本篇文章就来给大家介绍一下CSS的阴影效果属性,CSS添加阴影效果的方法

CSS怎么添加阴影边框?

css怎么设置边框阴影?很多人遇到这类问题都不知道怎么处理,其实利用css加阴影边框是很简单的。在CSS中可以使用box-shadow属性或filter属性的drop-shadow()来添加阴影边框。

css边框阴影怎么设置?

我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下。

具有分层框、更平滑的Css阴影效果

当光线照射到物体上并投射出阴影时,阴影会呈现出无数独特的特征。如果你试图用 then 捕捉真实阴影的微妙之处box-shadow,那么,你就很不走运了。CSSbox-shadow属性并不是为了鼓励表现力而构建的

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!