Question regarding CSS in Outlook mail temp
Question
I am working on a mail template for an inventory confirmation email and the mail I have to do contains something that I am struggling to find resources on so any resource about it if you know is helpful. I am trying to make a responsive mail template that also looks good on outlook/microsoft mail and making circle for item colour presents the most trouble to me.
2 answers
solution1
0 2021-12-15 13:08:51
You can use the <style> tag in email to create something like this. Inline styles are also supported.
.circle{ height: 16px; width: 16px; border-radius: 50%; outline: 2px solid; outline-offset: 2px; background-color: #f589d9; }
<div class="circle"></div>
solution2
0 2021-12-15 14:49:39
Here's an example on how to do this with HTML, CSS, and a dedicated VML fallback for The Outlooks on Windows.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question regarding CSS in Outlook mail temp</title>
<!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</head>
<body>
<!--[if !mso]><!-->
<div style="width:24px;" role="img" aria-label="Pink color">
<div style="border:4px solid #000; border-radius:50%;">
<div style="padding:2px;">
<div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
</div>
</div>
</div>
<!--<![endif]-->
<!--[if mso]>
<v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
<v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
<v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
<v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
</v:group>
<![endif]-->
</body>
</html>
Here are test results of rendering on Email on Acid .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.