8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 带边框半径的边框渐变

带边框半径的边框渐变

Aniruddh Parihar 1月前
46 0

我有以下 CSS：a.btn.white-grad { background：$lgrey; 颜色：#313149 ！important; 边框：1px solid #000; border-image-source：linear-gradient（向右，#9c20aa，#fb3570）；...

我有以下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 边框半径？

帖子版权声明 1、本帖标题：带边框半径的边框渐变
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Aniruddh Parihar在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • lgds 1月前 0 只看Ta
    引用 2楼

    Also available on my website here: https://css-tip.com/border-gradient/

    如果您 想要透明度 ，我建议使用 CSS 遮罩方法， 因为现在支持非常好。

    您不能使用 border-radius 渐变。这是另一个想法，您可以依赖多个背景并调整 background-clip ： 

    .white-grad {
  background: 
    linear-gradient(#ccc 0 0) 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>

    CSS border gradient with radius

    CSS Mask 方法

    这是使用 CSS 的不同想法 mask ，您将获得透明度并且它还将具有响应性： 

    .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;
  inset: 0;
  padding: 5px; /* the border thickness */
  border-radius: 15px;
  background: linear-gradient(to right, #9c20aa, #fb3570);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;

}
    <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 border radius with linear gradient

    使用 CSS 变量，我们可以轻松调整： 

    .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;
  inset: 0;
  padding: var(--b);
  border-radius: var(--r);
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)); 
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

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 gradient mask with border radius

    相关问题以获得不同的效果： 如何在 CSS 中将渐变从外到内应用到边框？

    上面的例子也涵盖了圆形： 

    .white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}

.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset: 0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius: 50%;
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

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>

    CSS circular border with gradient

    如果您想将动画应用于边框，则相关问题： 具有透明背景和旋转渐变边框的按钮

    还有不同的半径形状： 

    .white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}

.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  padding: var(--b);
  border-radius: var(--r,50%);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

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>

    CSS curved shape with gradient border

    和不同的边框厚度： 

    .white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width: 150px;
  aspect-ratio: 1;
  position: relative;
  z-index: 0;
}
.white-grad:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--c,linear-gradient(#9c20aa, #fb3570));
  padding: var(--b);
  border-radius:var(--r,50%);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;
}

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>

    Linear gradient curved shape

    SVG 方法

    您还可以考虑如下所示的 SVG： 

    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>

    在 SVG 外部获取渐变的方式 mask 相同 

    .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;
  --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>');
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

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>

    CSS border gradient with SVG mask

    您还可以将其作为公共元素并考虑 position:absolute 将其放置在文本周围： 

    .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>
  • 引用 3楼

    我爱你。@NoéVIRICEL 如果你将第一个线性渐变中的 #ccc 值更改为透明，那就应该可以了

  • 引用 4楼

    @mikespitz_8 第一个不适用于透明度，你需要考虑其他透明度解决方案（SVG 或遮罩）

  • 引用 5楼

    这确实很酷，但似乎如果框背景和页面背景是不同的颜色，页面背景方角就会从边框后面伸出。

  • 引用 6楼

    @MrJWolf 蒙版内的颜色无关紧要，它必须是纯色，不透明（您可以使用 #000、红色、蓝色、#f00 等）。您看到的颜色来自背景定义

  • 引用 7楼

    单个元素，无伪元素，无 SVG，无掩码。

    我不能承担这个责任，我是在一个网站上看到的（我忘记了该网站并且无法再找到它）。

    • 它只是一个 button 带有圆边和渐变背景的
    • 它使用一个 box-shadow 来 inset 用白色填充内部
    • 它有一个 2px 的边框，实际上是透明的，所以按钮的边缘会透过来。 

    body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* Fill the inside with white */
  background-origin: border-box;
  box-shadow: inset 0 100vw white;
  /* A transparent border, so the very edge of the button shows through */
  border: 2px solid transparent;
}
    <button class="gradient-border">Hello</button>
  • 引用 8楼

    问题在于，与使用遮罩方法不同，您无法获得（半）透明背景。如果页面背景的每个像素都比文本和边框的每个像素更暗或更亮，则可以使用混合……这种情况可能会发生，但很少发生。如果按钮需要渐变背景，则使用 box-shadow 方法填充也不是正确的选择。

  • 引用 9楼

    谢谢@Ana。是的，我同意这些都是合理的批评。在我们的案例中，我不需要透明背景或渐变填充，因此这些限制是可以接受的。

  • Arek 1月前 0 只看Ta
    引用 10楼

    到目前为止，这是最好的实现。请注意，可以通过修改阴影颜色来更改按钮内部颜色，这里是红色：box-shadow: inset 0 100vw red;

  • 引用 11楼

    谢谢@CodePal！是的，我希望通过“用白色填充内部”注释来表明这一点，但可能不太明显。

  • 引用 12楼

    border-radius 对边框图像没有影响。这是因为 border-image-outset 能够将图像放置在边框框之外，因此边框图像被边框区域剪裁是没有意义的。 要在使用边框图像时创建圆角边框 ，您应该：

    1. [或者] 带有圆角的 图像
    2. 或者，[…]将其绘制 为背景 。

    -- https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders

    第二种建议的方法（ “背景” ）已在其他答案中详细描述，因此让我们看一下第一种方法： 创建带有圆角的[边框]图像本身 .

    border-image 使用 SVG（自 2010 年起） 

    span {
  font-size: 26px;
  border-style: solid;
  border-color: crimson;
  border-width: 10px;
  border-image-slice: 10 fill;
  border-image-source: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
 width="100" height="100"> \
 <linearGradient id="g"> \
  <stop stop-color="darkviolet" /> \
  <stop stop-color="darkorange" offset="1" /> \
 </linearGradient> \
 <rect fill="lightgrey" stroke="url(%23g)" \
  stroke-width="3" x="1.5" y="1.5" \
  rx="8.5" width="97" height="97" /> \
</svg>');
}

html {
 padding: 1em;
 background: repeating-linear-gradient(-45deg, canvas 0 6px, color-mix(in srgb, canvas, canvastext 10%) 0 12px); background-size: 100vw 100vh
}
    <span>Hello</span>

    它有它的 缺点 ：

    1. 很难使其具有交互性：像任何其他 url() 嵌入式图形一样，我们必须创建任何后续变体，并且无法在它们之间平稳过渡。
    2. 可能需要对内部间距进行数学计算和调整：由于 SVG 描边围绕 路径 ，因此为了获得 外半径 等于 10px 的 3px 宽描边，SVG rx 必须是 10 - (1/2 * 3) = 8.5 ，例如。
    3. 区域 border-slice 缩放 border-width 尺寸
    4. 真正的实体 background 将是可见的，这使得在 CSS+SVG 功能损坏或不受支持的情况下，很难获得能够产生与背景形成对比的文本的弹性 CSS。
    5. 同样适用于 box-shadow ：仅可代替使用 filter: drop-shadow(...) 。
    6. 半透明背景有问题，因为 SVG 仍然无法完全围绕填充绘制笔触 .

    但它有一些 好处 ：

    1. 无需剪辑，
    2. 无需遮盖，
    3. 溢出仍然可见，
    4. 无需假不透明伪背景封面，
    5. 容易使边框半透明（透明），
    6. SVG 可以实现任何形状，
    7. 可以以任何可以想象到的方式进行动画制作。

    只是为了好玩，让一些“border-gradient” 旋转 并改变“middle”颜色怎么样： 

    p {
  border-width: 2em;
  border-style: solid;
  border-image-slice: 40;
  border-image-source: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
 width="1000" height="1000"> \
 <linearGradient id="g" \
  gradientUnits="userSpaceOnUse"> \
  <stop stop-color="%23F0F7" /> \
  <stop offset=".5">\
   <animate attributeName="stop-color" \
    values="%230FF7;%23FF07;%230FF7" \
    dur="6s" repeatCount="indefinite" /> \
  </stop> \
  <stop stop-color="%230F07" offset="1" /> \
  <animate attributeName="x1" \
   dur="4s" repeatCount="indefinite" \
   values="0;1000;1000;0;0"/> \
  <animate attributeName="y1" \
   dur="4s" repeatCount="indefinite" \
   values="0;0;1000;1000;0"/> \
  <animate attributeName="x2" \
   dur="4s" repeatCount="indefinite" \
   values="1000;0;0;1000;1000"/> \
  <animate attributeName="y2" \
   dur="4s" repeatCount="indefinite" \
   values="1000;1000;0;0;1000"/> \
 </linearGradient> \
 <rect fill="none" stroke="url(%23g)" \
  stroke-width="20" x="10" y="10" \
  rx="30" width="980" height="980" /> \
</svg>');
 margin: 1em;
}

html {
  color-scheme: dark;
}

body {
  font-size: 10vmin;
  background-image: linear-gradient(
   to bottom right,
   canvas,
   color-mix(in srgb,
    canvas, canvastext 20%
   )
  );
  background-size: 1em 1em;
  background-repeat: round;
  text-align: center;
}
    <p>Trippy semi-transparent rounded border filled with rotating gradient. (Hopefuly.)
  • 引用 13楼

    您需要将按钮包裹在 div 中，并 border-radius 在该父 div 上设置。为了正常工作，您还必须将其设置 overflow:hidden 为该父 div。如下所示： 

    .btn-wrap {
    border-radius: 5px;
    overflow: hidden;
    margin: 20px;
    width: 60px;
}
a.btn.white-grad {
    background: #eee;
    color: #313149 !important;
    border: 20px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    line-height: 2;
}
    	<div class="btn-wrap">
		<a href="#" class="btn white-grad">link</a>
	</div>
返回
作者最近主题：