Gradient borders

后端 未结 17 1411
一个人的身影
一个人的身影 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:22

    Another hack for achieving the same effect is to utilize multiple background images, a feature that is supported in IE9+, newish Firefox, and most WebKit-based browsers: http://caniuse.com/#feat=multibackgrounds

    There are also some options for using multiple backgrounds in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

    For example, suppose you want a 5px-wide left border that is a linear gradient from blue to white. Create the gradient as an image and export to a PNG. List any other CSS backgrounds after the one for the left border gradient:

    #theBox {
        background:
            url(/images/theBox-leftBorderGradient.png) left no-repeat,
            ...;
    }
    

    You can adapt this technique to top, right, and bottom border gradients by changing the background position part of the background shorthand property.

    Here is a jsFiddle for the given example: http://jsfiddle.net/jLnDt/

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

    I agree with szajmon. The only problem with his and Quentin's answers is cross-browser compatibility.

    HTML:

    <div class="g">
        <div>bla</div>
    </div>
    

    CSS:

    .g {
    background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
    background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
    background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
    }
    
    .g > div { background: #fff; }
    
    0 讨论(0)
  • 2020-11-22 04:26

    Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.

    Firefox claims to support gradients in two ways:

    1. Using border-image with border-image-source
    2. Using border-right-colors (right/left/top/bottom)

    IE9 has no support.

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

    Gradient Borders from Css-Tricks: http://css-tricks.com/examples/GradientBorder/

    .multbg-top-to-bottom {
      border-top: 3px solid black;
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
      background-image: -webkit-linear-gradient(#000, transparent);
      background-image:
          -moz-linear-gradient(#000, transparent),
          -moz-linear-gradient(#000, transparent);
      background-image:
          -o-linear-gradient(#000, transparent),
          -o-linear-gradient(#000, transparent);
      background-image: 
          linear-gradient(#000, transparent),
          linear-gradient(#000, transparent);
      -moz-background-size: 3px 100%;
      background-size: 3px 100%;
      background-position: 0 0, 100% 0;
      background-repeat: no-repeat; 
    }
    
    0 讨论(0)
  • 2020-11-22 04:31

    Here's a nice semi cross-browser way to have gradient borders that fade out half way down. Simply by setting the color-stop to rgba(0, 0, 0, 0)

    .fade-out-borders {
    min-height: 200px; /* for example */
    
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
    -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
    -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
    border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
    }
    
    <div class="fade-out-border"></div>
    

    Usage explained:

    Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                                  \---------------------------------/ \----------------------------/
                                    Definition of the gradient line         List of color stops  
    

    More here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

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

    Example for Gradient Border

    Using border-image css property

    Credits to : border-image in Mozilla

    .grad-border {
      height: 1px;
      width: 85%;
      margin: 0 auto;
      display: flex;
    }
    .left-border, .right-border {
      width: 50%;
      border-bottom: 2px solid #695f52;
      display: inline-block;
    }
    .left-border {
      border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
    }
    .right-border {
      border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
    }
    <div class="grad-border">
      <div class="left-border"></div>
      <div class="right-border"></div>
    </div>

    0 讨论(0)
提交回复
热议问题