element messagebox设置样式

要设置 Element UI 的 Message Box 的样式，你可以通过以下步骤进行操作：

1. 在你的项目中添加一个 CSS 文件，比如 `messagebox-style.css`。

2. 在这个 CSS 文件中，你可以使用以下类名来选择 Message Box 的不同元素并设置样式：

- `.el-message-box`: Message Box 的最外层容器。

- `.el-message-box__header`: Message Box 的标题部分。

- `.el-message-box__message`: Message Box 的消息内容部分。

- `.el-message-box__content`: Message Box 的整个内容区域。

- `.el-message-box__btns`: Message Box 的按钮部分。

- `.el-message-box__btn`: Message Box 中每个按钮的样式。

3. 在你的 HTML 中使用 Message Box 时，加入 `custom-class` 属性来指定你在 CSS 文件中定义的样式类名。如下所示：

   <el-button @click="showMsgBox" type="primary">显示 Message Box</el-button>
   
   <el-message-box
     title="提示"
     message="这是一条消息"
     custom-class="my-message-box"
     :show-close="false"
     :show-confirm-button="false"
     :show-cancel-button="false"
   >
     <el-button slot="footer" type="primary" @click="handleConfirm">确定</el-button>
   </el-message-box>

在这个例子中，我们给 Message Box 添加了一个名为 `my-message-box` 的自定义样式类，用来设置整个 Message Box 的样式。注意，我们还设置了 `show-close`、`show-confirm-button` 和 `show-cancel-button` 属性为 `false`，这是为了隐藏 Message Box 的关闭按钮、确认按钮和取消按钮，让我们自己添加一个按钮来关闭 Message Box。

4. 在你的 CSS 文件中，你可以使用如下方式来定义你的样式：

   /* 定义整个 Message Box 的样式 */
   .my-message-box {
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #fff;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
   }
   
   /* 定义 Message Box 的标题的样式 */
   .my-message-box .el-message-box__header {
     color: #409eff;
     font-size: 18px;
     font-weight: bold;
   }
   
   /* 定义 Message Box 的消息内容的样式 */
   .my-message-box .el-message-box__message {
     padding: 20px;
     font-size: 14px;
     line-height: 1.5;
   }
   
   /* 定义 Message Box 的按钮的样式 */
   .my-message-box .el-message-box__btn {
     padding: 6px 20px;
     font-size: 14px;
     line-height: 1.5;
     color: #fff;
     background-color: #409eff;
     border-color: #409eff;
     border-radius: 4px;
   }
   
   /* 定义 Message Box 中每个按钮的间距 */
   .my-message-box .el-message-box__btn + .el-message-box__btn {
     margin-left: 10px;
   }

在这个例子中，我们定义了整个 Message Box 的边框、背景、阴影等样式，以及标题、消息内容和按钮的字体大小、颜色、背景色等样式。我们还定义了每个按钮之间的间距，让它们看起来更舒适。

这样，你就可以通过自定义 CSS 样式来设置 Element UI 的 Message Box 的样式了。