我正在為庫存確認電子郵件制作郵件模板，我必須做的郵件包含一些我正在努力尋找資源的內容，因此如果您知道任何有關它的資源會有所幫助。我正在嘗試制作一個在 Outlook/Microsoft 郵件中看起來也不錯的回應式郵件模板，并且為專案顏色制作圓圈對我來說是最麻煩的。
uj5u.com熱心網友回復：
下面是一個示例，說明如何使用 HTML、CSS 和Windows 上的 Outlooks的專用 VML 回退來執行此操作。
<!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>
以下是在 Acid 上的電子郵件渲染的測驗結果。
uj5u.com熱心網友回復：
您可以使用<style>電子郵件中的標簽來創建類似的內容。還支持行內樣式。
.circle{
height: 16px;
width: 16px;
border-radius: 50%;
outline: 2px solid;
outline-offset: 2px;
background-color: #f589d9;
}<div class="circle"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/383248.html