问题
Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested <div>'s are ugly as can be and don't make for a good reusable style component, but I don't know how else to approach this effect! Any guidance on what approaches to try to accomplish this would be greatly appreciated!
Here is a link to a pen demonstrating my current approach:
: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
回答1:
You can build it using multiple background:
.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>If you want inner radius you can adjust like below:
.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>Related question to get diffent gradient with radius: Border Gradient with Border Radius
回答2:
I think you should use the border-image property and se it to a linear gradient and tweak until you have achieved what you want. After all css does treat linear-gradient() as an image. If you have an image of what you want to produce maybe I can help bring it to life. I hope this helps
来源：https://stackoverflow.com/questions/61184968/how-do-you-apply-a-gradient-from-outer-to-inner-only-to-borders-in-css