为了账号安全,请及时绑定邮箱和手机立即绑定

小Tip:有三角的指示框阴影实现

标签:
CSS3

webp

有三角的指示阴影框

利用css3滤镜 drop-shadow

直接上代码:

<!DOCTYPE html><html><head><style>.box{    width:200px;    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
}.jiao{    height: 0px;    width: 0px;    border-right: 10px solid transparent;    border-bottom: 10px solid #fff;    border-left: 10px solid transparent;    margin: 0 auto;
}.con{    width:200px;    height:200px;    background: #fff;    border-radius: 5px;
}</style></head><body>
    <div class="box">
        <div class="jiao"></div>
        <div class="con"></div>
    </div></body></html>



作者:不二很纯洁
链接:https://www.jianshu.com/p/e01f1048b6e5


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消