带边框半径的边框渐变
[英] Border Gradient with Border Radius
本文介绍了带边框半径的边框渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下 CSS:-
a.btn.white-grad {背景:$lgrey;颜色:#313149 ！重要；边框:1px 实心 #000；边框图像源:线性渐变(向右，#9c20aa，#fb3570)；边框图像切片:20；向左飘浮;@include 字体大小(26);边距:75px 0;}
添加 border-radius: 5px 似乎没有任何作用，我认为这是因为我正在使用边框渐变，有没有办法让我完全达到所需的 5px 边框半径?
解决方案
2021:我推荐使用 CSS mask 版本，因为现在支持很好
您不能将 border-radius 与渐变一起使用.这是您可以依赖多个背景并调整 background-clip 的另一个想法:
.white-grad {背景:linear-gradient(#ccc,#ccc) padding-box,/*这是你的灰色背景*/线性渐变(向右，#9c20aa，#fb3570)边框；颜色:#313149；填充:10px；边框:5px 实心透明；边框半径:15px；显示:内联块；边距:75px 0;}
这里有一些文字
<div class="white-grad">这里有一些很长很长的文字
<div class="white-grad">一些很长很长的<br>长文本在这里</div>
如果你想要透明度，你可以考虑像下面这样的 SVG:
svg {宽度:200px；高度:100px；边距:10px；}
<svg xmlns="http://www.w3.org/2000/svg"><定义><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>
您可以申请作为背景:
.white-grad {background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" 样式="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20"stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');颜色:#313149；填充:25px；边框半径:15px；显示:内联块；边距:75px 0;}身体 {背景:黄色；}
这里有一些文字
<div class="white-grad">这里的文字很 looooooooooong</div>
和 mask 一样，你可以在 SVG 之外获得渐变:
.white-grad {颜色:#313149；填充:25px；边框半径:15px；显示:内联块；边距:75px 0;背景尺寸:0 0;位置:相对；z-索引:0；}.white-grad::before {内容: "";位置:绝对；z-索引:-1；顶部:0；左:0；右:0；底部:0；背景图像:继承；背景大小:自动；-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent"stroke="white"/></svg>') 0/100% 100%;掩码:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5"width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20"stroke-width="10" fill="transparent" stroke="white"/></svg>') 0/100% 100%;}身体 {背景:黄色；}
<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)">这里有一些文字
<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)">这里的文字很 looooooooooooong</div><div class="white-grad" style="background-image:radial-gradient(blue,pink)">文字非常<br>loooooooooooong 这里</div>
您也可以将其用作公共元素，并考虑将 position:absolute 放在文本周围:
.white-grad {颜色:#313149；填充:25px；边框半径:15px；显示:内联块；边距:75px 0;位置:相对；z-索引:0；}.white-grad >SVG {位置:绝对；顶部:0；左:0;高度:100%；宽度:100%；z-索引:-1；}身体 {背景:黄色；}.隐藏 {高度:0；宽度:0；}
<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg><div class="white-grad"><svg xmlns="http://www.w3.org/2000/svg"><使用 href="#border"/></svg>这里有一些文字
<div class="white-grad"><svg xmlns="http://www.w3.org/2000/svg"><使用 href="#border"/></svg>这里的文字很 looooooooooong</div>
这是使用 mask 的 CSS 的不同想法，您将拥有透明度并且它也将具有响应性:
.white-grad {颜色:#313149；填充:10px；显示:内联块；边距:75px 0;位置:相对；z-索引:0；}.white-grad:之前{内容:"";位置:绝对；z-索引:-1；顶部:0；左:0;右:0;底部:0;填充:5px；边框半径:15px；背景:线性渐变(向右，#9c20aa，#fb3570)；-webkit-掩码:线性梯度(#fff 0 0)内容框，线性梯度(#fff 0 0)；-webkit-mask-composite:目的地输出；面具复合:排除；}
这里有一些文字
<div class="white-grad">这里有一些很长很长的文字
<div class="white-grad">一些很长很长的<br>长文本在这里</div>
使用 CSS 变量，我们可以轻松调整:
.white-grad {--b:5px;/* 边框宽度*/--r:15px;/* 半径 */颜色:#313149；填充: calc(var(--b) + 5px);显示:内联块；边距:75px 0;位置:相对；z-索引:0；}.white-grad:之前{内容:"";位置:绝对；z-索引:-1；顶部:0；左:0;右:0;底部:0;填充:var(--b);边界半径:var(--r);背景: var(--c,linear-gradient(to right, #9c20aa, #fb3570));-webkit-掩码:线性梯度(#fff 0 0)内容框，线性梯度(#fff 0 0)；-webkit-mask-composite:目的地输出；面具复合:排除；}身体 {背景:#f2f2f2；}
这里有一些文字
<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)">这里有一些很长很长的文字
<div class="white-grad" style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)">这里有一些很长很长的<br>长文本</div><div class="white-grad" style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)">一些很长的<br>长文本在这里<br>越来越多，越来越多
获得不同效果的相关问题:
如果您想将动画应用于边框的相关问题:
和不同的边框粗细:
.white-grad {--b:5px;/* 边框宽度*/颜色:#313149；显示:内联块；边距:10px；宽度:150px；位置:相对；z-索引:0；}.white-grad:后{内容:"";显示:内联块；填充顶部:100%；}.white-grad:之前{内容:"";位置:绝对；z-索引:-1；顶部:0；左:0;右:0;底部:0;背景: var(--c,linear-gradient(#9c20aa, #fb3570));填充:var(--b);边界半径:var(--r，50％)；-webkit-掩码:线性梯度(#fff 0 0)内容框，线性梯度(#fff 0 0)；-webkit-mask-composite:目的地输出；面具复合:排除；}身体 {背景:#f2f2f2；}
<div class="white-grad" style="--b:0 0 20px 20px;--r:50% 050% 50%;"></div><div class="white-grad" style="--b:10px 0 10px 0;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"><;/div><div class="white-grad" style="--b:8px 0px 0px 8px;--r:50% 0 0;--c:linear-gradient(40deg,black 50%,blue 0)"></div><div class="white-grad" style="--b:20px 20px 0 20px;--r:50% 50% 0 0;--c:conic-gradient(pink,orange,red,pink)"></div>
I have the following CSS:-
a.btn.white-grad {
background: $lgrey;
color: #313149 !important;
border: 1px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
border-image-slice: 20;
float: left;
@include font-size(26);
margin: 75px 0;
}
Adding border-radius: 5px doesn't seem to do anything, I figured it's because I'm using border gradient, is there a way for me to achieve the desired 5px border radius at all?
解决方案
2021: I recommend using the CSS mask version since the support is pretty good now
You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip:
.white-grad {
background:
linear-gradient(#ccc,#ccc) padding-box, /*this is your grey background*/
linear-gradient(to right, #9c20aa, #fb3570) border-box;
color: #313149;
padding:10px;
border: 5px solid transparent;
border-radius:15px;
display:inline-block;
margin: 75px 0;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> Some long long long text here</div>
<div class="white-grad"> Some long long <br>long text here</div>
If you want transparency, you can consider SVG like below:
svg {
width:200px;
height:100px;
margin:10px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#9c20aa" offset="0"/>
<stop stop-color="#fb3570" offset="1"/>
</linearGradient>
</defs>
<rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>
</svg>
That you can apply as background:
.white-grad {
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');
color: #313149;
padding:25px;
border-radius:15px;
display:inline-block;
margin: 75px 0;
}
body {
background:yellow;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> text very loooooooooooong here</div>
And the same way as mask where you can get the gradient outside of the SVG:
.white-grad {
color: #313149;
padding: 25px;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
background-size:0 0;
position: relative;
z-index: 0;
}
.white-grad::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:inherit;
background-size:auto;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>') 0 / 100% 100%;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="white"/></svg>') 0 / 100% 100%;
}
body {
background: yellow;
}
<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)"> Some text here</div>
<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)"> text very loooooooooooong here</div>
<div class="white-grad" style="background-image:radial-gradient(blue,pink)"> text very<br> loooooooooooong here</div>
You can also use it as common element and consider position:absolute to place it around the text:
.white-grad {
color: #313149;
padding: 25px;
border-radius: 15px;
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad > svg {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
body {
background: yellow;
}
.hide {
height:0;
width:0;
}
<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
Some text here</div>
<div class="white-grad">
<svg xmlns="http://www.w3.org/2000/svg">
<use href="#border" />
</svg>
text very loooooooooooong here</div>
Here is a different idea with CSS using mask where you will have transparency and it will also be responsive:
.white-grad {
color: #313149;
padding: 10px;
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding: 5px;
border-radius: 15px;
background: linear-gradient(to right, #9c20aa, #fb3570);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad"> Some long long long text here</div>
<div class="white-grad"> Some long long <br>long text here</div>
With CSS variables, we can make it easy to adjust:
.white-grad {
--b:5px; /* border width*/
--r:15px; /* the radius */
color: #313149;
padding: calc(var(--b) + 5px);
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding: var(--b);
border-radius: var(--r);
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>
<div class="white-grad" style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>
<div class="white-grad" style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>
Related question to get a different effect: How do you apply a gradient from outer to inner, only to borders, in CSS?
The above examples cover also the circle shape:
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width:150px;
position:relative;
z-index:0;
}
.white-grad:after {
content:"";
display:inline-block;
padding-top:100%;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius:50%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad"></div>
<div class="white-grad" style="--b:10px;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px;--c:conic-gradient(black,orange,purple)"></div>
Related question in case you want to apply an animation to the border: Button with transparent background and rotating gradient border
Also different radius shapes:
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width:150px;
position:relative;
z-index:0;
}
.white-grad:after {
content:"";
display:inline-block;
padding-top:100%;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius:var(--r,50%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad" style="--r:50% 0 50% 50%;"></div>
<div class="white-grad" style="--b:10px;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px;--r:50% 0 0;--c:linear-gradient(-40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px;--r:50% 50% 0 0;--c:conic-gradient(black,orange,purple)"></div>
and different border thickness:
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width:150px;
position:relative;
z-index:0;
}
.white-grad:after {
content:"";
display:inline-block;
padding-top:100%;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: var(--c,linear-gradient(#9c20aa, #fb3570));
padding: var(--b);
border-radius:var(--r,50%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
body {
background:#f2f2f2;
}
<div class="white-grad" style="--b:0 0 20px 20px;--r:50% 0 50% 50%;"></div>
<div class="white-grad" style="--b:10px 0 10px 0;--r:50% 0;--c:linear-gradient(140deg,red,yellow,green)"></div>
<div class="white-grad" style="--b:8px 0px 0px 8px;--r:50% 0 0;--c:linear-gradient(40deg,black 50%,blue 0)"></div>
<div class="white-grad" style="--b:20px 20px 0 20px;--r:50% 50% 0 0;--c:conic-gradient(pink,orange,red,pink)"></div>
这篇关于带边框半径的边框渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
