如何给边框添加渐变

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/

- ThinkkSo

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和first-child伪类选择器CSS。

top(in pseudo selector) = -border height = -33 px 

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

- Abdennour TOUMI

---

我曾经尝试过这个，但完全不起作用，因为它会干扰我的透明右边框和左边框。 - ThinkkSo

它能够工作，但并不能完全覆盖所有内容。 - ThinkkSo

因为我想在深蓝色区域获取渐变。http://jsfiddle.net/EHELN/3/ - ThinkkSo

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%;
}

演示

看起来我误解了方向。尝试这个方法将其反过来（适用于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%;
}

{{链接1：演示2}}

- vals

---

http://jsfiddle.net/j77Vj/1/ 我已经修复了它，但是从上到下仍然可以看到边缘与渐变颜色不对应。 - ThinkkSo

为垂直方向添加了解决方案。对于非 Webkit 浏览器，只需添加无前缀的转换即可。 - vals

第二个解决方案更好，尽管最后一部分似乎没有完全对齐...几乎看不见但是有效。 - ThinkkSo

Answer 3

如果你想在边框上绘制渐变，那么你可以使用border-image或带有背景渐变的半透明边框：演示

但是： 你甚至可以放弃半透明边框并将其变成填充：演示

#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
  );
}

- G-Cyrillus

Answer 4

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

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

- KnightHawk