一个文本块周围的边框。

Question

我想要实现这个：

当我使用 inline-block 并添加边框时，我会得到这个结果：

如您所见，边框并未环绕文本，而是环绕块状元素。

如果不使用inline-block，将会得到以下效果：

现在，文本块周围不再只有一个边框。

这是一个使用tailwindcss的游乐场： 在此输入链接说明

我使用tailwind快速生成它，但实际上没有必要使用tailwind。

- Alon Valadji

Answer 1

你可以使用投影滤镜来近似实现它

p {
 font-size:18px;
}

span {
  background-color: lightblue;
  padding:1px 2px;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 0px black);
  
  /* the below is not mandatory but gives better result for padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; 
}

<p>Pie candy canes pie wafer pudding caramels. Sesame snaps biscuit candy sesame snaps sesame snaps liquorice bonbon candy canes. Brownie donut chocolate apple pie bear <span>law jelly beans brownie. Oat cake gummi bears candy dragée marshmallow biscuit carrot cake cake. Cheesecake tiramisu jelly liquorice carrot cake. Chocolate liquorice candy canes dragée chocolate bar. Biscuit oat cake toffee jujubes jelly beans. Cake candy halvah pudding cupcake shortbread marzipan cotton candy. Pie cheesecake gingerbread tart bonbon gummi bears chocolate. Tiramisu topping toffee lemon drops marshmallow dragée. Bear claw chocolate bar cotton candy bonbon lemon drops topping. Fruitcake gingerbread tart jelly-o cotton candy cotton candy</span> jelly cookie. Halvah chocolate bar halvah cake jelly-o jelly beans tootsie roll tiramisu powder. Marshmallow shortbread jelly-o pudding jelly beans macaroon.</p>

或者使用SVG滤镜以获得更好的效果：

p {
 font-size:18px;
}

span {
  background-color: lightblue;
  padding:1px 2px;
  filter: url(#inset);
  
  /* the below is not mandatory but gives better result for padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; 
}

<p>Pie candy canes pie wafer pudding caramels. Sesame snaps biscuit candy sesame snaps sesame snaps liquorice bonbon candy canes. Brownie donut chocolate apple pie bear <span>law jelly beans brownie. Oat cake gummi bears candy dragée marshmallow biscuit carrot cake cake. Cheesecake tiramisu jelly liquorice carrot cake. Chocolate liquorice candy canes dragée chocolate bar. Biscuit oat cake toffee jujubes jelly beans. Cake candy halvah pudding cupcake shortbread marzipan cotton candy. Pie cheesecake gingerbread tart bonbon gummi bears chocolate. Tiramisu topping toffee lemon drops marshmallow dragée. Bear claw chocolate bar cotton candy bonbon lemon drops topping. Fruitcake gingerbread tart jelly-o cotton candy cotton candy</span> jelly cookie. Halvah chocolate bar halvah cake jelly-o jelly beans tootsie roll tiramisu powder. Marshmallow shortbread jelly-o pudding jelly beans macaroon.</p>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
      <feFlood flood-color="red" result="outside-color"/>
      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
      <feComposite in="outside-color" operator="in" result="outside-stroke"/>

      <feFlood flood-color="antiquewhite" result="inside-color"/>
      <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>

      <feMorphology in="SourceAlpha" radius="0"/>
      <feComposite in="SourceGraphic" operator="in" result="fill-area"/>

      <feMerge>
        <feMergeNode in="outside-stroke"/>
        <feMergeNode in="inside-stroke"/>
        <feMergeNode in="fill-area"/>
      </feMerge>
    </filter>
  </defs>
</svg>

- Temani Afif

---

似乎在Chrome上表现良好，但在Firefox上不行... - Temani Afif