我想设计我的标题如上图所示。这里的问题是关于带两种不同颜色的边框。这是我到目前为止所尝试的代码。提前谢谢。
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>
&#13;
答案 0 :(得分:23)
这是一种不使用伪元素的方法:
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;
}
&#13;
<header>
<h1>HEADER</h1>
</header>
&#13;
为了好玩,您可以在文本颜色上产生分色效果 - 使用一个额外的伪元素 - 就像这样:
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);
}
&#13;
<header>
<h1 data-text="HEADER">HEADER</h1>
</header>
<hr>
<header>
<h1 data-text="Some text here">Some text here</h1>
</header>
&#13;
答案 1 :(得分:17)
在::before
标记上使用伪::after
和h1
以及linear-gradient
作为background
使用高度而不是边框来获取该样式,
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%);
}
&#13;
<header>
<h1>HEADER</h1>
</header>
&#13;
答案 2 :(得分:7)
与许多其他答案不同,不,您不需要使用伪元素。使用多个渐变可以正常工作:
#880015
为50%,#fff
为50%background-size: 100% 3px
Voila-见下面的概念验证:
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>
答案 3 :(得分:1)
这是一种方法。我在:before
和:after
伪元素上使用线性渐变,并使用absolute
位置来执行此操作。
我使用了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;
}
&#13;
<header>
<h1>HEADER</h1>
</header>
&#13;
答案 4 :(得分:1)
您可以使用Position
和Psuedo Elements来实现它。
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;
}
&#13;
<header>
<h1>HEADER</h1>
</header>
&#13;
答案 5 :(得分:1)
添加带有边框的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>
答案 6 :(得分:0)
我认为这就是你想要的。
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);
}
&#13;
<header>
<h1>HEADER</h1>
</header>
&#13;
答案 7 :(得分:-1)
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>
你来......