尝试在 MJML 中创建线性渐变边框。无法解决填充问题

Question

想强调一下，我是 MJML 的新手

<mjml>
  <mj-head>
    <mj-font name="Satoshi" href="https://fonts.cdnfonts.com/css/satoshi" />
    <mj-attributes>
      
  
      <mj-text align="center" color="#555" />
      <mj-section background-color="#fff" />
    </mj-attributes>
    <mj-style inline="inline"> 
      
      
      .leaf{ 
      top: 0;
      right: 0;
      height:200px;
      
      }
      
      .text{
      background-image:
      linear-gradient(to right, #6633cc, #f5c144);  
      background-clip: padding-box, border-box;
  background-origin: border-box;
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      padding-bottom:0px;
      border-radius:45px;
  }
      
    </mj-style>
  </mj-head>
  
  <mj-body background-color="#110c24">
    
    
    <mj-section background-color="#110c24">
      <mj-group>
         <mj-column>
          <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
          </mj-column>
          <mj-column>
            <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" css-class="leaf" />
          </mj-column>
      </mj-group>
    </mj-section>
 
  
    <mj-wrapper css-class="text" >
   
    <mj-section border-radius= "35px" background-color="rgba(36, 27, 75, 0.85)" padding:"20px">
      <mj-column>
        <mj-text align="left" color="white" font-family="Satoshi" font-size="15px">Dear <span style="color: #ffd259"> John, </span></mj-text>
        <mj-text align="left" color="white" font-family="Satoshi" font-size="15px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</mj-text>
        <mj-text align="left" color="white" font-family="Satoshi" font-size="15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</mj-text>
        <mj-text align="left" color="white" font-family="Satoshi" font-size="15px"> Regards, <br />
          <span style="color: #ffd259"> DeerHack Organizing Committee </span>
        </mj-text>
      </mj-column>
      
    </mj-section>
    </mj-wrapper>
  
  </mj-body>
</mjml>

基本上，我已经实现了渐变边框，但我希望所有 4 个边的边框宽度都相同（从上到下，从左到右）。我使用背景图像来实现渐变边框效果。

还有一件事，我不确定此功能是否可行，但我希望带有“叶子”类的图像位于页面的右上角。由于绝对定位不可用，我不确定如何继续前进。

Answer 1

这一切的发生是因为 MJML 为大多数标签添加了默认填充，因此您必须使用

mj-all

标签将所有填充设置为默认 0。我解决了您的两个问题 - 请在下面检查它们：

<mjml>
  <mj-head>

    <mj-font name="satoshi" href="https://fonts.cdnfonts.com/css/satoshi" />

    <mj-style inline="inline">
      .text > table > tbody > tr > td {
      border-radius: 45px !important;
      background: linear-gradient(to right, #6633cc, #f5c144) !important;
      }
    </mj-style>

    <mj-attributes>
      <mj-all padding="0" font-family="'satoshi', Helvetica, Arial, sans-serif" />
      <mj-section background-color="#fff" />
      <mj-text align="center" color="#555" line-height="20px" />
    </mj-attributes>

  </mj-head>


  <mj-body background-color="#110c24">
    <mj-wrapper padding="0px 20px">

      <mj-section padding="40px 0px" background-color="#110c24">
        <mj-group>
          <mj-column>
            <mj-image align="left" width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
          </mj-column>
          <mj-column>
            <mj-image align="right" width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
          </mj-column>
        </mj-group>
      </mj-section>

      <mj-section css-class="text" padding="20px" border-radius="45px" background-color="#110c24">
        <mj-column padding="30px" border-radius="35px" background-color="rgba(36, 27, 75, 0.85)">
          <mj-text align="left" color="white" font-size="15px">Dear <span style="color: #ffd259"> John, </span></mj-text>
          <mj-text padding="12px 0px" align="left" color="white" font-size="15px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</mj-text>
          <mj-text align="left" color="white" font-size="15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</mj-text>
          <mj-text padding-top="12px" align="left" color="white" font-size="15px"> Regards, <br />
            <span style="color: #ffd259"> DeerHack Organizing Committee </span>
          </mj-text>
        </mj-column>
      </mj-section>

    </mj-wrapper>
  </mj-body>
</mjml>