具有半径解决方案的渐变边界不适用于 tailwindcss答案

【问题标题】：Gradient borders with radius solution isn't working with tailwindcss具有半径解决方案的渐变边界不适用于 tailwindcss
【发布时间】：2021-09-25 07:29:04
【问题描述】：

我已经看到带有半径的渐变边框在 css-tricks 上使用这个特定的代码 sn-p。

<div class="fem">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum neque debitis at ad fugit, esse sequi rem ab consequatur id sint veniam ex quam adipisci. Ab itaque officia atque id!
  </p>
</div>

.fem {
  padding: 1rem;
  position: relative;
  background: #000;
  color: white;
  border-radius: 8px;
}

.fem:before {
 content: "";
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 width: calc(100% + 10px);
 height: calc(100% + 10px);
 z-index: -1;
 border-radius: 12px;
 background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);  
}

我已经在jsbin 上测试了这段代码，它似乎工作得很好。

现在，我正在开发一个顺风应用程序，但同样的代码不适合我。

我觉得某些基本样式可能会导致这种不稳定的行为。我似乎无法弄清楚如何纠正它。

这是tailwind play的链接

顺风时，我看到了不可见的渐变边框

【问题讨论】：

z-index 将它放在其他元素的下方。您现在可以使用背景剪辑：例如play.tailwindcss.com/o1xygkhV6D?file=css，因此需要为伪及其父级设置平均 z-index 和位置（并注意 BFC）。
我知道这个特殊的解决方案；但这对 android 移动浏览器有无意的副作用。它显示了一个额外的行
那么不要使用带有 z-index 的伪元素，使用一个带有渐变和填充的元素，然后使用另一个带有黑色背景的内部元素。它不会花费太多，而且很坚固。 ;) 例如play.tailwindcss.com/ASDzzl3tju?file=css

标签： css tailwind-css linear-gradients

【解决方案1】：

    <div class="main">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ullam fugit quaerat voluptates culpa dolores id
            veritatis suscipit quo officia minus, ex totam velit praesentium explicabo, exercitationem blanditiis numquam
            doloremque?
        </div>

<style>
.main {
            background-color: black;
            max-width: 80%;
            padding: 1rem;
            position: relative;
            color: white;
            border-radius: 8px;
        }

        .main:before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            width: calc(100% + 10px);
            height: calc(100% + 10px);
            z-index: -1;
            border-radius: 12px;
            background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
        }


</style>

【讨论】：

我刚刚尝试了这段代码，但它不适合我