Gradient borders

后端 未结 17 1409
一个人的身影
一个人的身影 2020-11-22 03:40

I\'m trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);


        
相关标签:
17条回答
  • 2020-11-22 04:16

    Try the below example:

    .border-gradient {
          border-width: 5px 5px 5px 5px;
          border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
          border-image-slice: 9;
          border-style: solid;
    }
    
    0 讨论(0)
  • 2020-11-22 04:16

    Try this, it worked for me.

    div{
      border-radius: 20px;
      height: 70vh;
      overflow: hidden;
    }
    
    div::before{
      content: '';
      display: block;
      box-sizing: border-box;
      height: 100%;
    
      border: 1em solid transparent;
      border-image: linear-gradient(to top, red 0%, blue 100%);
      border-image-slice: 1;
    }
    <div></div>

    The link is to the fiddle https://jsfiddle.net/yash009/kayjqve3/1/ hope this helps

    0 讨论(0)
  • 2020-11-22 04:16

    For cross-browser support you can try as well imitate a gradient border with :before or :after pseudo elements, depends on what you want to do.

    0 讨论(0)
  • 2020-11-22 04:17

    It's a hack, but you can achieve this effect in some cases by using the background-image to specify the gradient and then masking the actual background with a box-shadow. For example:

    p {
      display: inline-block;
      width: 50px;
      height: 50px;
      /* The background is used to specify the border background */
      background: -moz-linear-gradient(45deg, #f00, #ff0);
      background: -webkit-linear-gradient(45deg, #f00, #ff0);
      /* Background origin is the padding box by default.
      Override to make the background cover the border as well. */
      -moz-background-origin: border;
      background-origin: border-box;
      /* A transparent border determines the width */
      border: 4px solid transparent;
      border-radius: 8px;
      box-shadow:
        inset 0 0 12px #0cc, /* Inset shadow */
        0 0 12px #0cc, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */
    }
    

    From: http://blog.nateps.com/the-elusive-css-border-gradient

    0 讨论(0)
  • 2020-11-22 04:18

    WebKit now (and Chrome 12 at least) supports gradients as border image:

    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
    

    Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
    Browser support: http://caniuse.com/#search=border-image

    0 讨论(0)
  • 2020-11-22 04:21

    border-image-slice will extend a CSS border-image gradient

    This (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.

      border-bottom: 6px solid transparent;
      border-image: linear-gradient(to right, red , yellow);
      border-image-slice: 1;
    
    0 讨论(0)
提交回复
热议问题