使用CSS实现上下半边边框不同颜色

Question

我希望我的页眉设计能像上面的图片一样。问题在于如何使用两种不同的颜色来绘制边框。这是我迄今为止尝试的代码。提前感谢。

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  border-top: 3px solid #880015;
  border-bottom: 3px solid #880015;  
}

<header>
  <h1>HEADER</h1>
</header>

- RaJesh RiJo

Answer 1

以下是一种不使用伪元素的方法:

h1 {
  display: inline-block;
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  background:linear-gradient(to right, #ccc 50%, maroon 50%) bottom,
    linear-gradient(to right, maroon 50%, #ccc 50%) top;
  background-repeat: no-repeat;
  background-size:100% 2px;
} 

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  display: inline-block;
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  background:linear-gradient(to right, #ccc 50%, maroon 50%) bottom,
    linear-gradient(to right, maroon 50%, #ccc 50%) top;
  background-repeat: no-repeat;
  background-size:100% 3px;
}

<header>
  <h1>HEADER</h1>
</header>

只是为了好玩，您还可以在文本颜色上产生分裂颜色的效果 - 使用一个额外的伪元素 - 就像这样：

---

header {
  text-align: center;
  background-color: #7f7f7f;
  --color1: maroon;
  --color2: #ccc;
}

h1 {
  position: relative;
  display: inline-block;
  font-size: 30px;
  color: var(--color1);
  background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%) bottom, linear-gradient(to right, var(--color2) 50%, var(--color1) 50%) top;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding: 5px 0;
  white-space: nowrap;
}

h1:before {
  content: attr(data-text);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 5px;
  width: 50%;
  color: var(--color2);
}

<header>
  <h1 data-text="HEADER">HEADER</h1>
</header>

<hr>

<header>
  <h1 data-text="Some text here">Some text here</h1>
</header>

Codepen演示

- Danield

Answer 2

使用伪类选择器::before和::after在h1标签上，结合使用linear-gradient作为background，使用height而非border来实现这种样式。

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1{
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  position:relative;
}
h1:before{
  content:"";
  width:100%;
  height:3px;
  left:0;
  top:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, white 50%, brown 50%);
}
h1:after{
  content:"";
  width:100%;
  height:3px;
  left:0;
  bottom:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, brown 50%, white 50%);
}

<header>
  <h1>HEADER</h1>
</header>

- frnt

---

我需要使用 z-index 吗？ - RaJesh RiJo

@RaJeshRiJo 不需要初始值，因为我使用了绝对定位。 - frnt

Answer 3

与许多其他答案不同，不需要使用伪元素。使用多个渐变效果就可以了：

• 使用两个渐变：一个旋转90度，另一个旋转-90度。在50%处使用两个颜色停止：#880015 和 #fff
• 使用100%宽度和3px高度的背景大小，即background-size: 100% 3px
• 将两个背景定位在元素的左上角和左下角

现在，您可以看到实现效果了：

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  
  background-image:
    linear-gradient(90deg, #880015 50%, #fff 50%),
    linear-gradient(-90deg, #880015 50%, #fff 50%);
    
  background-size: 100% 3px;
  
  background-position:
    top left,
    bottom left;
  
  background-repeat: no-repeat;
}

<header>
  <h1>HEADER</h1>
</header>

- Terry

Answer 4

这是一种实现方法。我使用了线性渐变在 :before 和 :after 伪元素上，通过绝对定位来实现。

我在50%处重复了颜色值，以产生明显的颜色变化，第二个颜色没有不透明度，以保持原始边框颜色: linear-gradient(to right, #fff, #fff 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0))

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  border-top: 3px solid #880015;
  border-bottom: 3px solid #880015;  
  position: relative;
  width: 199px;
}

h1::before {
    display: block;
    content: "";
    position: absolute;
    top: -3px;
    left: 0px;
    width: 5em;
    background: linear-gradient(to right, #fff, #fff 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
    height: 3px;
}

h1::after {
   display: block;
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0px;
    width: 5em;
    background: linear-gradient(to right, rgba(0,0,0,0),  rgba(0,0,0,0) 50%, #fff 50%, #fff);
    height: 3px;
}

<header>
  <h1>HEADER</h1>
</header>

- Nisarg Shah

Answer 5

你可以使用Position和伪元素来实现它。

header {
  text-align: center;
  background-color: #7f7f7f;
  position: relative;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  border-top: 3px solid #880015;
  border-bottom: 3px solid #880015;
  position: relative;
}

h1:after,
h1:before {
  content: '';
  height: 3px;
  width: 50%;
  background: #fff;
  position: absolute;
}

h1:after {
  top: -3px;
  left: 0;
}

h1:before {
  bottom: -3px;
  right: 0;
}

<header>
  <h1>HEADER</h1>
</header>

- Aslam

Answer 6

在正确的位置添加带有边框的before和after元素即可解决问题。

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  border-top: 3px solid #880015;
  border-bottom: 3px solid #880015;  
  position: relative;
}

h1:before {
  border-top: 3px solid lightgray;
  display: block;
  position: absolute;
  content: '';
  left: 0;
  right: 50%;
  bottom: -3px;
  width: 50%;
}

h1:after{
  border-top: 3px solid lightgray;
  display: block;
  position: absolute;
  content: '';
  left: 50%;
  right: 0;
  top: -3px;
  width: 50%;
}

<header>
  <h1>HEADER</h1>
</header>

- Jesse

Answer 7

我认为这就是你想要的。

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;
  position:relative;
}
h1:before, h1:after {
    background: linear-gradient(to right, rgb(136, 0, 21) 0%, rgb(136, 0, 21) 50%, rgb(195, 195, 195) 50%, rgb(195, 195, 195) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );
    position: absolute;
    width: 100%;
    height: 2px;
    display: inline-block;
    content: "";
}
h1:before {
    top: 0;
    left: 0;
}
h1:after {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

<header>
  <h1>HEADER</h1>
</header>

- Harden Rahul

Answer 8

header {
  text-align: center;
  background-color: #7f7f7f;
}

h1 {
  color: #00a2e8;
  font-size: 40px;
  padding: 5px 0;
  display: inline-block;

}

h1:after {
  content: "";
  width: 50%;
  display: block;
  border-bottom: 3px solid #880015;
}
h1 span:after {
  content: "";
  width: 50%;
  display: block;
  border-bottom: 3px solid #fff;
  float:right;

}
h1:before {
  content: "";
  width: 50%;
  display: block;
  border-bottom: 3px solid #fff;
}
h1 span:before {
  content: "";
  width: 50%;
  display: block;
  border-bottom: 3px solid #880015;
  float:right;
        margin-top: -3px;
}

<header>
  <h1><span>HEADER</span></h1>
</header>

这里你去...

- Rushabh Sheth