使用表情符号作为CSS边框

Question

我正在寻找一种方法来使用表情符号作为HTML简报的边框。差不多，我希望圣诞树表情符号（）重复一个div。关于如何做到的任何想法？

Answer 1

通常，一种方法是使用border-image属性，这需要您使用图片而不是字符。 正如评论中所指出的那样，遗憾的是，这在电子邮件中得不到很好的支持。

.christmas {
  display: inline-block;
  padding: 15px;
  border: 33px solid transparent;
  -moz-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  -webkit-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  -o-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
  border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat;
}

<div class="christmas">
  Merry Christmas!
</div>

Answer 2

正如您将其用于邮件一样，表格将是您的解决方案，例如

<table style="width: 478px;height: 285px;">
  <tr>
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td>
  </tr>
  <tr>
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y"></td>
    <td valign="top" style="padding: 20px;">

      Content
      
    </td>
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y;"></td>
  </tr>
  <tr>
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td>
  </tr>
</table>

Answer 3

这是一个关于 SVG 文本和遮罩的想法。 无 PNG

.box {
  width: 300px;
  /* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
  height: 240px;
  position: relative;
  /* to center the text */
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E?%3C/text%3E%3C/svg%3E");
  
  --mask: linear-gradient(#000, #000) content-box, 
          linear-gradient(#000, #000);
  -webkit-mask: var(--mask);
          mask: var(--mask);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
  padding: 30px;
}

<div class="box">
  Hello
</div>

我使用的 SVG

<svg height="30" width="30">
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">?</text>
</svg>

我用 svg-encoder

编码

您可以插入任何类型的表情符号：

.box {
  width: 300px;
  /* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
  height: 240px;
  position: relative;
  /* to center the text */
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E?%3C/text%3E%3C/svg%3E");
  
  --mask: linear-gradient(#000, #000) content-box, 
          linear-gradient(#000, #000);
  -webkit-mask: var(--mask);
          mask: var(--mask);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
  padding: 30px;
}

<div class="box">
  Hello
</div>