el-dialog 圆角白边问题

最新推荐文章于 2025-09-11 00:48:11 发布

原创最新推荐文章于 2025-09-11 00:48:11 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

79 篇文章

订阅专栏

本文介绍了如何在Element UI的el-dialog组件中调整顶部圆角，通过修改深级选择器解决了对话框上方圆角大小的问题。具体步骤包括设置/deep/.el-dialog的border-radius属性，并展示了代码示例。

在这里插入图片描述
项目中因为改右边的x 所以这儿没有用标题

    <el-dialog
      :visible.sync="delVisible"
      width="440px"
      :show-close="false"
      custom-class="customClass"
    >
      <div class="digTop">
        <div>系统维护安全验证</div>
        <div class="icon-class" @click=";(delVisible = false), (tempId = null)">
          <i class="el-icon-close" size="16"></i>
        </div>
	</div>
    </el-dialog>

设计图的圆角是8px

出现圆角的代码

/deep/ .el-dialog {
  border-radius: 8px;
}
.digTop {
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #7763fa;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  color: white;
  font-size: 16px;
  letter-spacing: 1px;
  }

解决方法.el-dialog 上方圆角调大

/deep/ .el-dialog {

  border-radius: 15px 15px 8px 8px;
}

el-dialog 圆角 白边问题

el-dialog 圆角白边问题