Gradient borders

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

    Try this, works fine on web-kit

    .border { 
        width: 400px;
        padding: 20px;
        border-top: 10px solid #FFFF00;
        border-bottom:10px solid #FF0000;
        background-image: 
            linear-gradient(#FFFF00, #FF0000),
            linear-gradient(#FFFF00, #FF0000)
        ;
        background-size:10px 100%;
        background-position:0 0, 100% 0;
        background-repeat:no-repeat;
    }
    <div class="border">Hello!</div>

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

    instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

    a simple example:

    .g {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
    background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
    padding: 2px;
    }
    
    .g > div { background: #fff; }
    <div class="g">
        <div>bla</div>
    </div>


    EDIT: You can also leverage the :before selector as @WalterSchwarz pointed out:

    body {
        padding: 20px;
    }
    .circle {
        width: 100%;
        height: 200px;
        background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
        border-radius: 100%;
        position: relative;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }
    .circle::before {
        border-radius: 100%;
        content: '';
        background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
        top: -10px;
        left: -10px;
        bottom: -10px;
        right: -10px;
        position: absolute;
        z-index:-1;
    }
    <div class="circle"></div>

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

    Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.

    — https://developer.mozilla.org/en/CSS/-moz-linear-gradient

    Example 3 - Gradient Borders
    
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    padding: 5px 5px 5px 15px; 
    

    — http://www.cssportal.com/css3-preview/borders.htm

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

    try this code

    .gradientBoxesWithOuterShadows { 
    height: 200px;
    width: 400px; 
    padding: 20px;
    background-color: white; 
    
    /* outer shadows  (note the rgba is red, green, blue, alpha) */
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
    
    /* rounded corners */
    -webkit-border-radius: 12px;
    -moz-border-radius: 7px; 
    border-radius: 7px;
    
    /* gradients */
    background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
    background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
    }
    

    or maybe refer to this fiddle: http://jsfiddle.net/necolas/vqnk9/

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

    There is a nice css tricks article about this here: https://css-tricks.com/gradient-borders-in-css/

    I was able to come up with a pretty simple, single element, solution to this using multiple backgrounds and the background-origin property.

    .wrapper {
      background: linear-gradient(#222, #222), 
                  linear-gradient(to right, red, purple);
      background-origin: padding-box, border-box;
      background-repeat: no-repeat; /* this is important */
      border: 5px solid transparent;
    }
    

    The nice things about this approach are:

    1. It isn’t affected by z-index
    2. It can scale easily by just changing the width of the transparent border

    Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

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