搜索

首页  >  问答  >  正文

创建拥有边框半径的渐变边框

<p>我有以下的CSS:</p> <pre class="brush:php;toolbar:false;">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; }</pre> <p>添加 <code>border-radius: 5px</code> 似乎没有任何效果。我想这是因为我正在使用边框渐变... 是否有办法实现所需的5px边框半径?</p>
P粉930448030P粉930448030549 天前505

全部回复(2)我来回复

  • P粉541565322

    P粉5415653222023-08-14 15:04:39

    2023 - 单个元素,无伪元素,无SVG,无遮罩。

    我不能为此负责,我在一个网站上看到的(我忘记了网站的名字,也找不到它了)。

    • 它只是一个普通的带有圆角和渐变背景的按钮
    • 它使用了一个insetbox-shadow来填充内部的白色
    • 它有一个2px的边框,实际上是透明的,所以按钮的边缘可以透过来显示


    body {
      background: aliceblue;
    }
    
    .gradient-border {  
      border-radius: 24px;
      padding: 6px 12px;
      background-image: linear-gradient(90deg, red 0%, blue 100%);
      /* 填充内部白色 */
      background-origin: border-box;
      box-shadow: inset 0 1000px white;
      /* 透明边框,所以按钮的边缘可以透过来显示 */
      border: 2px solid transparent;
    }
    <button class="gradient-border">Hello</button>


    回复
    0
  • P粉066224086

    P粉0662240862023-08-14 09:22:15

    2021:如果你想要透明度,我建议使用CSS遮罩方法,因为现在的支持相当不错


    你不能在渐变中使用border-radius。这里有另一个想法,你可以依赖多个背景并调整background-clip


    .white-grad {
      background: 
        linear-gradient(#ccc 0 0) padding-box, /*这是你的灰色背景*/
        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"> 这里放置一些文字</div>
    
    <div class="white-grad"> 这里放置一些很长很长的文字</div>
    
    <div class="white-grad"> 这里放置一些很长很长的文字<br>这里放置一些很长的文字</div>

    回复
    0
  • 取消回复