css气泡对话框

ฅQSω[*邱╭

已于 2024-08-19 10:39:59 修改

阅读量173

点赞数 2

分类专栏： css 文章标签： css 前端

于 2024-07-26 16:03:03 首次发布

本文链接：https://blog.csdn.net/qq_45030898/article/details/140718073

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css气泡对话框

1.代码

1.代码

<div class="pop-with-border">
  <p>filter:drop-shadow实现整体阴影</p>
</div>
.pop-with-border {
    margin: 30px;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    position: relative; 
    border: 1px solid #ddd;
    filter: drop-shadow(0 0 5px #eee);
}
.pop-with-border:before,
.pop-with-border:after {
  top: -8px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
  content: "";
  display: block;
  width: 0;
  height: 0;
  left: 16px;
  overflow: hidden;
  position: absolute;
  z-index: 101;
}
.pop-with-border:before {
  top: -9px;
  border-bottom-color: #ddd;
  z-index: 99;
}
.pop-with-border p {
    padding: 10px 20px;
}