具有边界半径的边界渐变 [英] Border Gradient with Border Radius
本文介绍了具有边界半径的边界渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下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;
}
添加border-radius:5px似乎没有任何作用，我认为这是因为我使用的是边界渐变，我是否有办法完全实现所需的5px边界半径?
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?
推荐答案
您不能将border-radius与渐变一起使用.这是另一个您可以依靠多个背景并调整background-clip的想法:
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>
如果要透明，可以考虑使用SVG，如下所示:
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>
您可以申请作为背景:
.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>
您也可以将其用作通用元素，并考虑将position:absolute放置在文本周围:
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>
这是使用mask的CSS的一个不同而复杂的想法，在这里您将具有透明性并且也会响应:
Here is a different and complex 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;
border: 5px solid transparent;
border-radius: 15px;
background: linear-gradient(to right, #9c20aa, #fb3570) border-box;
-webkit-mask:
radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top right/15px 15px,
radial-gradient(farthest-side at top right ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom left /15px 15px,
radial-gradient(farthest-side at top left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom right/15px 15px,
radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top left /15px 15px,
linear-gradient(#fff,#fff) top /100% 5px,
linear-gradient(#fff,#fff) bottom/100% 5px,
linear-gradient(#fff,#fff) left /5px 100%,
linear-gradient(#fff,#fff) right /5px 100%;
-webkit-mask-repeat:no-repeat;
mask:
radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top right/15px 15px,
radial-gradient(farthest-side at top right ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom left /15px 15px,
radial-gradient(farthest-side at top left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom right/15px 15px,
radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top left /15px 15px,
linear-gradient(#fff,#fff) top /100% 5px,
linear-gradient(#fff,#fff) bottom/100% 5px,
linear-gradient(#fff,#fff) left /5px 100%,
linear-gradient(#fff,#fff) right /5px 100%;
mask-repeat:no-repeat;
}
<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>
有了CSS变量，我们可以轻松进行调整:
With CSS variables, we can make it easy to adjust:
.white-grad {
--b:5px; /* border width*/
--r:15px; /* the radius */
--g:transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px) 100%;
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;
border: var(--b) solid transparent;
border-radius: var(--r);
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)) border-box;
-webkit-mask:
radial-gradient(farthest-side at bottom left ,var(--g)) top right/var(--r) var(--r),
radial-gradient(farthest-side at top right ,var(--g)) bottom left /var(--r) var(--r),
radial-gradient(farthest-side at top left ,var(--g)) bottom right/var(--r) var(--r),
radial-gradient(farthest-side at bottom right,var(--g)) top left /var(--r) var(--r),
linear-gradient(#fff,#fff) top /100% var(--b),
linear-gradient(#fff,#fff) bottom/100% var(--b),
linear-gradient(#fff,#fff) left /var(--b) 100%,
linear-gradient(#fff,#fff) right /var(--b) 100%;
-webkit-mask-repeat:no-repeat;
mask:
radial-gradient(farthest-side at bottom left ,var(--g)) top right/var(--r) var(--r),
radial-gradient(farthest-side at top right ,var(--g)) bottom left /var(--r) var(--r),
radial-gradient(farthest-side at top left ,var(--g)) bottom right/var(--r) var(--r),
radial-gradient(farthest-side at bottom right,var(--g)) top left /var(--r) var(--r),
linear-gradient(#fff,#fff) top /100% var(--b),
linear-gradient(#fff,#fff) bottom/100% var(--b),
linear-gradient(#fff,#fff) left /var(--b) 100%,
linear-gradient(#fff,#fff) right /var(--b) 100%;
mask-repeat:no-repeat;
}
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>
要获得不同效果的相关问题:如何在CSS中应用从外部到内部(仅到边界)的渐变? /a>
Related question to get a different effect: How do you apply a gradient from outer to inner, only to borders, in CSS?
这篇关于具有边界半径的边界渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
