文章最后更新时间：
给大家做了四款款子比主题邮箱通知样式美化，邮箱通知美化还是不错的，博客给大家设计并美化了，目前是四款样式，后面博客会做很多邮箱通知，喜欢的自己挑选几款自己部署吧！
部署教程
定位：/wp-content/themes/zibll/inc/functions/zib-email.php文件里面，我们搜$content = '，搜了之后，我们如下图替换子比的样式，如下图
![图片[1]-子比主题 – 邮箱通知样式美化（四款样式）-识趣者资源](https://www.tfbkw.com/wp-content/uploads/2025/08/20250819200421150-1-1024x541.webp)
样式如下
![图片[2]-子比主题 – 邮箱通知样式美化（四款样式）-识趣者资源](https://www.tfbkw.com/wp-content/uploads/2025/08/20250819181817854-1-1024x467.webp)
$content = '
<style>
.gradient-mail{
background:#eaf7ff;
padding:40px 0;
font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
}
.gradient-mail .box{
max-width:620px;
margin:auto;
border-radius:24px;
background:linear-gradient(140deg,#fff 60%,#d6eaff 100%);
box-shadow:0 4px 22px rgba(66,150,255,0.10);
overflow:hidden;
}
.gradient-mail .logo-bar{
background:linear-gradient(90deg,#60bef4 37%,#378de3 100%);
text-align: center;
padding:32px 0 20px 0;
}
.gradient-mail .logo-bar img{
max-height:62px;
max-width:180px;
border-radius:11px;
background:#fff;
padding:6px;
box-shadow:0 2px 8px #b6e2ff;
}
.gradient-mail .content{
padding:32px 14% 20px 14%;
color:#357ab7;
font-size:16px;
line-height:2;
}
.gradient-mail .info{
padding:18px 14% 36px 14%;
font-size:16px;
color:#4680be;
}
.gradient-mail .blog-title{
font-size:22px;
font-weight:700;
color:#2680fb;
margin-bottom:14px;
}
.gradient-mail .desc{
font-size:15px;
color:#5982b7;
margin-bottom:8px;
}
.gradient-mail .extra{
background:#e6f0fa;
border-radius:9px;
padding:10px 16px;
color:#2486c2;
margin-bottom:22px;
}
.gradient-mail .footer-bg{
width:100%;
display:block;
margin-top:0;
border-bottom-left-radius:24px;
border-bottom-right-radius:24px;
}
</style>
<div class="gradient-mail">
<div class="box">
<div class="logo-bar"><img src="' . $logo . '" alt="logo"></div>
<div class="content">' . $message . '</div>
<div class="info">
<div class="blog-title">' . $blog_name . '</div>
<div class="desc">' . $description . '</div>
<div class="extra">' . $con_more . '</div>
</div>
<img class="footer-bg" src="' . $bg . '" >
</div>
</div>
';![图片[3]-子比主题 – 邮箱通知样式美化（四款样式）-识趣者资源](https://www.tfbkw.com/wp-content/uploads/2025/08/20250819190432402-2-1024x498.webp)
$content = '<div>
<includetail>
<div align="center">
<div class="open_email" style="margin: 8px;">
<div>
<br>
<span class="genEmailContent">
<div id="cTMail-Wrap"
style="word-break: break-all;box-sizing:border-box;text-align:center;min-width:320px; max-width:660px; border:1px solid #f6f6f6; background-color:#f7f8fa; margin:auto; padding:20px 0 30px; font-family:\'helvetica neue\',PingFangSC-Light,arial,\'hiragino sans gb\',\'microsoft yahei ui\',\'microsoft yahei\',simsun,sans-serif">
<div class="main-content">
<table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse">
<tbody>
<tr style="font-weight:300">
<td style="width:3%;max-width:30px;"></td>
<td style="max-width:600px;">
<div id="cTMail-logo" style="width:92px; height:25px;">
<a href="' . $site_url . '">
<img border="0" src="' . $logo . '" style="width:140px; height:42px;display:block" alt="' . $blog_name . 'Logo">
</a>
</div>
<p style="height:2px;background-color: #00a4ff;border: 0;font-size:0;padding:0;width:100%;margin-top:20px;"></p>
<div id="cTMail-inner" style="background-color:#fff; padding:23px 0 20px;box-shadow: 0px 1px 1px 0px rgba(122, 55, 55, 0.2);text-align:left;">
<table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse;text-align:left;">
<tbody>
<tr style="font-weight:300">
<td style="width:3.2%;max-width:30px;"></td>
<td style="max-width:480px;text-align:left;">
<h1 id="cTMail-title" style="font-size: 20px; line-height: 36px; margin: 0px 0px 22px;">
【' . $blog_name . '】' . $title . '
</h1>
<p id="cTMail-userName" style="font-size:14px;color:#333; line-height:24px; margin:0;">
尊敬的' . $user_name . '，您好！
</p>
<p class="cTMail-content" style="line-height: 24px; margin: 12px 0px 0px; overflow-wrap: break-word; word-break: break-all;">
<span style="color: rgb(51, 51, 51); font-size: 14px;">
' . $message . '
<br><br>
' . $send_time . '
</span>
</p>
<p class="cTMail-content"
style="font-size: 14px; color: rgb(51, 51, 51); line-height: 24px; margin: 18px 0px 0px; word-wrap: break-word; word-break: break-all;">
' . $con_more . '
</p>
<dl style="font-size: 14px; color: rgb(51, 51, 51); line-height: 18px;">
<dd style="margin: 0px 0px 6px; padding: 0px; font-size: 12px; line-height: 22px;">
<p id="cTMail-sender" style="font-size: 14px; line-height: 26px; word-wrap: break-word; word-break: break-all; margin-top: 32px;">
此致<br>
<strong>' . $blog_name . ' 团队</strong>
</p>
</dd>
</dl>
</td>
<td style="width:3.2%;max-width:30px;"></td>
</tr>
</tbody>
</table>
</div>
<div id="cTMail-copy" style="text-align:center; font-size:12px; line-height:18px; color:#999">
<table style="width:100%;font-weight:300;margin-bottom:10px;border-collapse:collapse">
<tbody>
<tr style="font-weight:300">
<td style="width:3.2%;max-width:30px;"></td>
<td style="max-width:540px;">
<p style="text-align:center; margin:20px auto 14px auto;font-size:12px;color:#999;">
此为系统邮件，请勿回复。
</p>
<p id="cTMail-rights" style="max-width: 100%; margin:auto;font-size:12px;color:#999;text-align:center;line-height:22px;">
<img src="https://www.tfbkw.com/wp-content/uploads/2025/03/20250314030202661-gzh.png"
style="width:64px; height:64px; margin:0 auto;" alt="公众号二维码">
<br>
关注公众号，获取更多资讯
<br>
© ' . $blog_name . ' 版权所有
<br>
<img src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/mail/cr.svg" style="margin-top: 10px;" alt="安全认证">
</p>
</td>
<td style="width:3.2%;max-width:30px;"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="width:3%;max-width:30px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</span>
</div>
</div>
</div>
</includetail>
</div>';![图片[4]-子比主题 – 邮箱通知样式美化（四款样式）-识趣者资源](https://www.tfbkw.com/wp-content/uploads/2025/08/20250819194109695-1-1024x540.webp)
$content = '
<style>
.apple-mail-bg {
background: #f6f7fa;
margin:0;
padding:0;
min-height:100vh;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans",Arial,sans-serif;
letter-spacing:0;
}
.apple-mail-main {
max-width: 660px;
margin: 64px auto 36px auto;
background: #fff;
border-radius: 36px;
box-shadow: 0 8px 44px 0 rgba(41,51,61,0.10), 0 1.5px 9px 0 rgba(120,140,180,0.02);
overflow: hidden;
transition: max-width .18s, border-radius .13s;
}
.apple-mail-logo-box {
text-align: center;
padding-top: 56px;
padding-bottom: 38px;
background: #fff;
}
.apple-mail-logo {
max-width: 184px;
max-height: 54px;
width: auto;
height: auto;
display: inline-block;
}
.apple-mail-content {
padding: 0 68px 8px 68px;
background: #fff;
}
.apple-mail-message {
font-size: 21px;
color: #202a36;
line-height: 2.07;
margin-bottom: 12px;
margin-top: 4px;
word-break: break-word;
font-weight: 400;
}
.apple-mail-desc {
background: #f4f7fa;
color:#727e90;
border-radius: 15px;
padding: 17px 23px;
font-size: 17px;
margin: 28px 0 10px 0;
line-height: 1.83;
text-align:left;
font-weight: 400;
letter-spacing: 0;
}
.apple-mail-more {
background: #f7faed;
color:#5e9157;
border-radius: 15px;
padding: 15px 22px;
font-size: 17px;
margin: 15px 0 4px 0;
line-height:1.7;
text-align:left;
font-weight:400;
letter-spacing:0;
}
.apple-mail-btn-area {
text-align: center;
padding: 38px 0 49px 0;
}
.apple-mail-btn {
display:inline-block;
background: #f3f6f9;
color: #397be7 !important;
font-size: 18px;
font-weight: 700;
border-radius: 13px;
padding: 14px 59px;
letter-spacing: .3px;
text-decoration: none !important;
border:none;
box-shadow:0 2px 10px 0 rgba(52,87,210,0.05);
transition: background .15s,color .16s;
outline:none;
cursor: pointer;
white-space:nowrap;
}
.apple-mail-btn:hover {
background: #e5effc;
color: #2567ce !important;
}
.apple-mail-footer {
text-align: center;
color: #b2b9c6;
font-size: 15px;
background:#fbfcfd;
border-top:1px solid #e6e8ef;
border-radius:0 0 36px 36px;
padding: 20px 0 15px 0;
letter-spacing: 0.4px;
}
@media (max-width:900px){
.apple-mail-main{max-width:95vw;}
.apple-mail-content{padding-left:6vw;padding-right:6vw;}
}
@media (max-width:600px){
.apple-mail-main{
max-width:99vw;
border-radius:18px !important;
margin:19px 0;
box-shadow:0 3px 16px rgba(41,51,61,0.09);
}
.apple-mail-logo-box{
padding-top:24px !important;
padding-bottom:14px !important;
}
.apple-mail-logo{max-width:120px;max-height:40px;}
.apple-mail-content{padding-left:5vw;padding-right:5vw;}
.apple-mail-message{font-size:16px;}
.apple-mail-desc,.apple-mail-more{
font-size:15px;
padding:12px 11px;
border-radius:10px;
}
.apple-mail-btn-area{padding:24px 0 25px 0;}
.apple-mail-btn{padding:11px 27vw; font-size:15px; border-radius:8px;}
.apple-mail-footer{font-size:12px; padding-top:13px; padding-bottom:9px; border-radius:0 0 18px 18px;}
}
</style>
<div class="apple-mail-bg">
<div class="apple-mail-main">
<div class="apple-mail-logo-box">
<img src="' . $logo . '" alt="logo" class="apple-mail-logo">
</div>
<div class="apple-mail-content">
<div class="apple-mail-message">'.nl2br($message).'</div>
'.($description ? '<div class="apple-mail-desc">'.$description.'</div>' : '').'
'.($con_more ? '<div class="apple-mail-more">'.$con_more.'</div>' : '').'
</div>
<div class="apple-mail-btn-area">
<a href="' . $site_url . '" target="_blank" class="apple-mail-btn">访问网站</a>
</div>
<div class="apple-mail-footer">
© ' . $blog_name . ' ｜ 本邮件为自动通知，请勿回复
</div>
</div>
</div>
';![图片[5]-子比主题 – 邮箱通知样式美化（四款样式）-识趣者资源](https://www.tfbkw.com/wp-content/uploads/2025/08/20250819200040914-1-1024x454.webp)
$content = '
<style>
@import url("https://fonts.googleapis.com/css?family=Quicksand:500,700&display=swap");
body, html {background:#f7f7fe !important;}
.acg-bg {
min-height:100vh; margin:0; padding:0;
background: linear-gradient(120deg, #f6f7fe 0%, #fff7fd 100%);
font-family: "Quicksand", "PingFang SC", "微软雅黑", Sans-serif;
}
.acg-main {
max-width:480px; margin:36px auto;
background:rgba(255,255,255,0.97);
border-radius:16px;
box-shadow:0 8px 40px 0 #a3d9ff22, 0 2px 8px 0 #ff9ccf22;
border:1.5px solid #f5eafe; position:relative; z-index:1;
overflow:hidden;
}
.acg-bubble {
position:absolute; z-index:1; pointer-events:none; border-radius:50%;
}
.acg-bubble-lt {
top:-35px; left:-29px;
width:88px; height:88px;
background:radial-gradient(circle at 38% 45%,#edaeff55,#cadfff66 75%,#fff0 100%);
box-shadow:0 7px 19px #eaf7ff44 inset;
}
.acg-bubble-rb {
bottom:-28px; right:-23px;
width:68px; height:68px;
background:radial-gradient(circle at 62% 60%,#f8f8fecc,#ffe9f77a 80%,#fff0 100%);
box-shadow:0 1px 12px #ffbbee44 inset;
}
.acg-logo-box {
text-align:center; position:relative; z-index:2;
background:linear-gradient(90deg,#ffe7ee 15%,#e6f7ff 80%);
padding-top:22px; padding-bottom:7px;
border-top-left-radius:16px;
border-top-right-radius:16px;
}
.acg-logo {
width:78%; min-width:110px; max-width:270px;
max-height:56px;
display:inline-block; object-fit:contain;background:transparent;
}
.acg-little-star {
position:absolute; top:13px; right:17px; z-index:7;
width:32px;height:32px;
background:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'34\' height=\'34\' viewBox=\'0 0 34 34\'%3E%3Cpath fill=\'%23F6CCFF\' d=\'M17 0l3.7 10.7h11.3l-9.2 6.5 3.6 10.8-9.4-6.6-9.3 6.6 3.5-10.8-9.2-6.5h11.3z\'/%3E%3C/svg%3E") center/contain no-repeat; opacity:.66;
}
.acg-candy {
position:absolute; left:0; bottom:0; width:44px; height:47px; z-index:2;
background:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'49\' height=\'55\' viewBox=\'0 0 49 55\'%3E%3Cellipse cx=\'24.5\' cy=\'35\' rx=\'22\' ry=\'16\' fill=\'%23f6f6fe\' stroke=\'%23e7e2ff\' stroke-width=\'1.7\'/%3E%3Cellipse cx=\'33\' cy=\'24\' rx=\'8.7\' ry=\'8\' fill=\'%23d9e7ff\' fill-opacity=\'0.6\'/%3E%3Cellipse cx=\'13\' cy=\'31\' rx=\'4.7\' ry=\'5.8\' fill=\'%23ffd6e3\' fill-opacity=\'0.7\'/%3E%3C/svg%3E") center/contain no-repeat; opacity:.65;
}
.acg-content {padding:0 30px 10px 30px; position:relative; z-index:2;}
.acg-divider {width:90%;height:22px; margin:12px auto 0 auto; display:block;}
.acg-divider svg {display:block; width:100%;height:22px;}
.acg-message {
font-size:17px; color:#332060;
line-height:2; margin:17px 0 10px 0;
word-break:break-all; font-weight:500;
}
.acg-desc {
background:linear-gradient(93deg,#ffeafb 40%,#e8fbff 130%);
color:#dd6eb9;font-size:15px;margin:18px 0 5px 0; padding:9px 15px;
border-radius:10px; font-weight:500;box-shadow:0 1.5px 5px #ffe5f433;
border:1px dashed #ffd7fa66;
}
.acg-more {
background:#e8fbff;color:#69bbf3;font-size:15px;
margin:0 0 12px 0; padding:8px 12px 11px 11px;
border-radius:11px; font-weight:500;
border:1px dashed #d3ebff66;
}
.acg-btn-area {text-align:center; padding:23px 0 26px 0;}
.acg-btn {
display:inline-block;
background:linear-gradient(90deg,#fea2e5 15%,#92e4ff 85%);
color:#fff !important; font-size:16.5px; font-weight:700;
border-radius:29px; padding:11px 45px 11px 37px;
border:none; text-decoration:none !important;
box-shadow:0 3px 10px 0 #b2e3ff44, 0 0.5px 2.5px #fea2e544;
letter-spacing:1px; transition:.18s;
outline:none; position:relative;cursor:pointer; font-family:inherit;
}
.acg-btn::after{
content:"";
display:inline-block;
width:1.2em;height:1.2em;
background:url("data:image/svg+xml,%3Csvg width=\'22\' height=\'22\' viewBox=\'0 0 20 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M12.2929 5.29297C12.6834 4.90245 13.3166 4.90245 13.7071 5.29297L17.7071 9.29297C18.0976 9.68349 18.0976 10.3166 17.7071 10.7071L13.7071 14.7071C13.3166 15.0977 12.6834 15.0977 12.2929 14.7071C11.9024 14.3166 11.9024 13.6834 12.2929 13.2929L14.5858 11H3C2.44772 11 2 10.5523 2 10C2 9.44772 2.44772 8.99997 3 8.99997H14.5858L12.2929 6.70703C11.9024 6.31651 11.9024 5.68349 12.2929 5.29297Z\' fill=\'%23fff\'/%3E%3C/svg%3E") center/contain no-repeat;
vertical-align:-0.22em; margin-left:0.6em; background-size:90% auto;
}
.acg-btn:hover{ background:linear-gradient(93deg,#56e4ff 0%,#ffaeec 100%); box-shadow:0 10px 25px #b2e3ff66; transform:translateY(-2.5px) scale(1.025);}
.acg-footer {
text-align:center; color: #ada5ef;
font-size:13px; background:linear-gradient(90deg,#fbe8fd44 10%,#e3f6ff55 90%);
border-top:1px solid #f3e3ff; border-bottom-left-radius:16px; border-bottom-right-radius:16px;
padding:13px 0 8px 0; letter-spacing:0.18px;
margin-top:-4px; font-family:inherit;
}
@media (max-width:660px){
.acg-main{max-width:99vw;}
.acg-content{padding:0 4vw 8px 4vw;}
.acg-logo{max-width:95vw; width:75vw; min-width:60px;}
.acg-divider{width:97%;}
.acg-bubble-lt{top:-16vw;left:-12vw;width:28vw;height:28vw;}
.acg-bubble-rb{bottom:-9vw;right:-8vw;width:20vw;height:20vw;}
}
@media (max-width:480px){
.acg-main{max-width:100vw; margin:4vw 0 4vw 0;}
.acg-content{padding:0 2vw 5px 2vw;}
.acg-btn{padding:10px 6vw 10px 6vw;font-size:15px;}
.acg-footer{padding-top:8px;padding-bottom:6px;font-size:12px;}
.acg-logo{max-width:97vw;}
}
</style>
<div class="acg-bg">
<div class="acg-main">
<span class="acg-bubble acg-bubble-lt"></span>
<span class="acg-bubble acg-bubble-rb"></span>
<div class="acg-logo-box">
<img src="' . $logo . '" alt="logo" class="acg-logo">
<span class="acg-little-star"></span>
</div>
<div class="acg-divider">
<svg viewBox="0 0 300 22" width="300" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M0,19 Q50,2 150,18 Q250,28 300,7" fill="none" stroke="#e8caff" stroke-width="3.2" stroke-linecap="round"/></svg>
</div>
<div class="acg-content">
<div class="acg-message">'.nl2br($message).'</div>
'.($description ? '<div class="acg-desc">'.$description.'</div>' : '').'
'.($con_more ? '<div class="acg-more">'.$con_more.'</div>' : '').'
</div>
<div class="acg-btn-area">
</div>
<span class="acg-candy"></span>
<div class="acg-footer">© ' . $blog_name . ' ｜ 自动邮件，请勿直接回复</div>
</div>
</div>
';© 版权声明
THE END
![表情[yun]-识趣者资源](https://47zhe.cn/wp-content/themes/zibll/img/smilies/yun.gif)
暂无评论内容