Как применить градиент от внешнего к внутреннему, только к границам, в CSS?

Question

На основании документации MDN это явно не поддерживается. Поэтому я попробовал это следующим образом в связанном коде пера ниже. Я знаю, что вложенные <div> ужасны, и не могут быть хорошим стилем многократного использования, но я не знаю, как еще подойти к этому эффекту! Любое руководство о том, какие подходы попытаться выполнить sh, будет с благодарностью!

Вот ссылка на перо, демонстрирующее мой текущий подход:

: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

Вы можете построить его, используя несколько фонов:

.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>

Смежный вопрос для получения градиента с радиусом: Градиент границы с радиусом границы

Answer 2

Я думаю, что вы должны использовать свойство border-image и установить его на линейный градиент и настраивать, пока не добьетесь того, что хотите. В конце концов css обрабатывает линейный градиент () как изображение. Если у вас есть изображение того, что вы хотите создать, возможно, я могу помочь воплотить его в жизнь. Я надеюсь, что это помогает