您好,欢迎来到海洋目录网!网站收录,值得选择!长期招友情链接 QQ10212321

快审
当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

web前端入门到实战:css实现不规则图形的阴影(如对话框)

来源:本站原创 浏览:19次 时间:2020-07-09

在日常开发中会使用带箭头的弹出对话框,有时为了美观或者突出,会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的,这样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前端项目实战教程,学习工具,全栈开发学习路线以及规划)

效果图:

web前端入门到实战:css实现不规则图形的阴影(如对话框)

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

web前端入门到实战:css实现不规则图形的阴影(如对话框)

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

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

效果图:

web前端入门到实战:css实现不规则图形的阴影(如对话框)

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

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

推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • DMOZ目录DMOZ目录

    DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

    www.dmozdir.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • Adcd网站目录Adcd网站目录

    Adcd网站目录是全免费的网址提交目录,收录国内外、各行业优秀网站,为用户提供全面的网站分类目录网站、优秀网站参考、友情链接交换平台、网站推广服务国内免费的网站提交入口(www.adcd.cn)。

    https://www.adcd.cn