css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）

今天小编跟大家讲解下有关css实现不规则图形的阴影(如对话框) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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);

}

效果图：

相同情况下，换成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对于背景色透明的元素依然是起作用的。

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。

css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）相关推荐

前端不规则图像点击_css实现不规则图形的阴影（如对话框）
在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影.由于图形不规则且可能是由多个元素拼接而成的,这样box-shadow属性可能不能满足需求.这里推荐一个类似的属性,filte ...
border三角形阴影(不规则图形阴影)和多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
html中如何写不规则图形,CSS写三角形、五角形等不规则图形
写页面的时候时长遇到一些奇怪图形,用css是可以实现各种不规则图形的,下面举例几个常用的: 一.三角形利用border-color支持transparent这一特性,隐藏三条边框,实现三角形. .t ...
使用CSS 3创建不规则图形
2019独角兽企业重金招聘Python工程师标准>>> 前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章 ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
html中的阴影怎么使用,css 内阴影怎么做
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解. CS ...
不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示
clip-path CSS 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏. 例子 div { width: 200px; height: 200px; background: ...
设置css阴影和取消css阴影
之前用mui布局样式,但是一直都会有这个阴影,在浏览器调试也调试没用这是设置阴影 /* 长宽模糊度颜色*/ box-shadow: 0 1px 6px #ccc; 取消的话直接设置为0就行了, ...

css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）

css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）相关推荐

最新文章

热门文章