此链接中的背景颜色(红色)仅应用于文本,而不是整个链接。
链接也有填充。
这适用于Outlook 2010。
有没有人知道如何让背景颜色填充链接?
这是一张图片:
<a href="#" class="btn" style="font-size: 13px; border: 1px solid #c5c4c4; color: #3c3c3c; padding: 7px 25px; display: inline-block; border-radius: 5px; font-weight: bold; text-decoration: none; background-color: red; background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);">
Accept
</a>
以下是可读格式的css:
font-size: 13px;
border: 1px solid #c5c4c4;
color: #3c3c3c;
padding: 7px 25px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
background-color: red;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
答案 0 :(得分:5)
我最终将锚点放在自己的表格中并设置td样式以获得背景和填充。
<table class="btn-table">
<tr>
<td style="font-family: arial,helvetica,sans-serif; font-size: 13px; border: 1px solid #c5c4c4; padding: 7px 25px; border-radius: 5px; font-weight: bold; background: #e3e2e2; background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);"><a href="#" class="btn" style="display: block; color: #3c3c3c; text-decoration: none;">Accept</a></td>
</tr>
</table>