Question

我想知道是否可以将渐变添加到边框顶部而不会影响边框右边框或边框左边，在这种情况下是透明的。我尝试添加渐变颜色，但它会影响边框左边框和右边框我试图让边框左边框和边框右边透明

#borderone {
        border-top: 33px solid #354658;
        border-left: 33px solid transparent;
        border-right: 33px solid transparent;
        margin: 0 auto;
        min-width: 1277px;
    }
    <div id='borderone'></div>

你可以看到这就是我想要它做的虽然我想要一个渐变背景颜色而不是这个纯黑蓝色http://jsfiddle.net/EHELN/

Answer 1

看到这个： http://css-tricks.com/examples/GradientBorder/

这对我来说已经足够了。

例如：

 #borderone:first-child:before {
    content:'';
    position:absolute;
    width:100%;
    height:4px;
    background:linear-gradient(to left, #354658, #9EBBDA);
    top:-33px;
    left:-5;
}

对于您的情况，您应该使用before＆amp; <{1}}伪选择器CSS同时出现。

first-child

FIDDLE： http://jsfiddle.net/abdennour/EHELN/2/

Answer 2

你可以使用渐变的背景和左右两个伪元素来获得这个效果

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(90deg, black, blue);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 33px;
    height: 100%;
}

.test:before {
    background: linear-gradient(45deg, transparent 50%, black 50%);
    right: 100%;
}

.test:after {
    background: linear-gradient(315deg, transparent 50%, blue 50%);
    left: 100%;
}

demo

看起来我很想念这个方向。试试这个以另一种方式（对于webkit）

 .test {
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 33px;
    background: linear-gradient(0deg, black, red);
    margin: 0 auto;
    min-width: 42px;
    background-clip: content-box;
    position: relative;
}

.test:before, .test:after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    bottom: 0px;
}

.test:before {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: bottom right;
    background: linear-gradient(-45deg, black 0, red 32px, transparent 32px);
    right: 100%;
}

.test:after {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: bottom left;
    background: linear-gradient(45deg, black 0, red 32px, transparent 32px);
    left: 100%;
}

demo 2

Answer 3

如果你想在边框上绘制渐变，那么你可以在bg中使用带有渐变的边框图像或半透明边框： DEMO < / p>

然后：您甚至可以删除半透明边框并将其填充为填充： DEMO

#borderone {
  position:relative;
  padding:33px 33px 0;/* well this is just like transparent borders :) */
  margin: 0 auto;
  height:100px;
  background:linear-gradient(
    to bottom, 
    #354658, 
    #9EBBDA 33px, 
    transparent 33px
  );
}

Answer 4

http://www.colorzilla.com/gradient-editor/

这是针对背景而非边框，但您可以使用此工具创建相同的效果。

如何向边框添加渐变

4 个答案:

demo

demo 2