8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

带边框半径的边框渐变

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)
  • 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>
  • 我爱你。@NoéVIRICEL 如果你将第一个线性渐变中的 #ccc 值更改为透明,那就应该可以了

  • @mikespitz_8 第一个不适用于透明度,你需要考虑其他透明度解决方案(SVG 或遮罩)

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

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

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

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

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

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

  • 谢谢@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>
返回
作者最近主题: