在 CSS 中，您如何应用从外到内的渐变，仅应用于边框？

Question

根据 MDN 文档，这似乎没有得到明确支持。所以我在下面的linked代码笔中尝试了如下。我知道嵌套的 <div> 很丑陋，并且不能构成一个好的可重用样式组件，但我不知道还有什么方法可以实现这种效果！非常感谢任何有关尝试实现此目标的方法的指导！

这里有一个 link 来演示我目前的方法：

:root {
  --outer-battle-window-color-0: #7c7874;
  --outer-battle-window-color-1: #c8c4c0;
  --outer-battle-window-color-2: #ccc9cc;
  --outer-battle-window-color-3: #c9c9cb;
  --outer-battle-window-color-4: #c2c1c5;
  --outer-battle-window-color-5: #71767e;
  --outer-battle-window-color-6: #6b6e87;

  --battle-window-top-gradient-color: #6c70a6;
  --battle-window-middle-gradient-color: #21217c;
  --battle-window-bottom-gradient-color: #040136;

  --battle-window-border-radius: 5px;
}
html{
    font-family: "Final Fantasy 3/6 Font Regular", monospace;
    color: #ecedee;
    margin: 0px;
    padding: 0px;
    background-color: var(--battle-window-middle-gradient-color);
    text-shadow: 3px 2px #2d2a4b;
}
div{
    background-color: var(--battle-window-middle-gradient-color);
}
#outer-window-border-color_0{
    border-color: var(--outer-battle-window-color-0);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_1{
    border-color: var(--outer-battle-window-color-1);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_2{
    border-color: var(--outer-battle-window-color-2);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_3{
    border-color: var(--outer-battle-window-color-3);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_4{
    border-color: var(--outer-battle-window-color-4);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_5{
    border-color: var(--outer-battle-window-color-5);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}
#outer-window-border-color_6{
    border-color: var(--outer-battle-window-color-6);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--battle-window-border-radius);
}

<div id="outer-window-border-color_0">
  <div id="outer-window-border-color_1">
    <div id="outer-window-border-color_2">
      <div id="outer-window-border-color_3">
        <div id="outer-window-border-color_4">
          <div id="outer-window-border-color_5">
            <div id="outer-window-border-color_6">
              This is a test of the borders!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/webDevelopmentSolutions/pen/zYvGWLO

Answer 1

我认为您应该使用边框图像属性并将其设置为线性渐变并进行调整，直到达到您想要的效果。毕竟 css 确实将 linear-gradient() 视为图像。如果您对想要制作的东西有一个形象，也许我可以帮助实现它。希望对您有所帮助

Answer 2

您可以使用多个背景构建它：

.box {
  --r:15px;     /* radius   */
  --g:red,blue; /* gradient */
  
  border-radius:var(--r);
  padding:calc(var(--r) + 5px);
  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--g)) top    left /var(--r) var(--r),
    radial-gradient(farthest-side at top    right,var(--g)) bottom left /var(--r) var(--r),
    radial-gradient(farthest-side at bottom left ,var(--g)) top    right/var(--r) var(--r),
    radial-gradient(farthest-side at top    left ,var(--g)) bottom right/var(--r) var(--r),
    /* borders*/
    linear-gradient(to top   ,var(--g)) top   /calc(100% - 2*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g)) bottom/calc(100% - 2*var(--r)) var(--r),
    linear-gradient(to right ,var(--g)) right /var(--r) calc(100% - 2*var(--r)),
    linear-gradient(to left  ,var(--g)) left  /var(--r) calc(100% - 2*var(--r));
  background-repeat:no-repeat;
  
  width:150px;
  display:inline-block;
  display:inline-block;
  vertical-align:top;
  font-size:25px;
}

<div class="box"> Some text inside</div>

<div class="box" style="--r:10px;--g:black,orange,grey"> more text inside</div>

<div class="box" style="--r:30px;--g:green,blue,yellow">Some text inside</div>

如果你想要内半径，你可以像下面这样调整：

.box {
  --r:10px;     /* radius   */
  --g:red 0%,blue; /* gradient */
  
  --rg:transparent 50%,var(--g);
  border-radius:calc(2*var(--r));
  padding:calc(2*var(--r) + 5px);
  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--rg)) top    left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    right,var(--rg)) bottom left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at bottom left ,var(--rg)) top    right/calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    left ,var(--rg)) bottom right/calc(2*var(--r)) calc(2*var(--r)),
    /* borders*/
    linear-gradient(to top   ,var(--g)) top   /calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g)) bottom/calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to right ,var(--g)) right /var(--r) calc(100% - 4*var(--r)),
    linear-gradient(to left  ,var(--g)) left  /var(--r) calc(100% - 4*var(--r));
  background-repeat:no-repeat;
  
  width:200px;
  box-sizing:border-box;
  display:inline-block;
  vertical-align:top;
  font-size:25px;
}

<div class="box"> Some text inside</div>

<div class="box" style="--r:8px;--g:black 0%,orange,grey"> more text inside</div>

<div class="box" style="--r:20px;--g:green 0%,blue,yellow">Some text inside</div>

获得不同半径梯度的相关问题：

在 CSS 中，您如何应用从外到内的渐变，仅应用于边框？

How do you apply a gradient from outer to inner, only to borders, in CSS?

html

css

border

linear-gradients