作者：专业长膘 | 来源：互联网 | 2023-01-11 14:09
我想设计我的标题如上图所示.这里的问题是关于带两种不同颜色的边框.这是我到目前为止所尝试的代码.提前致谢.
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
1> Danield..：
这是不使用伪元素的一种方法:
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
2> frnt..：
使用伪::before和::afteron 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%);
}
HEADER
3> Terry..：
与许多其他答案不同,不,您不需要使用伪元素.使用多个渐变可以正常工作:
使用两个渐变:一个旋转90度,另一个旋转-90度.使用两种颜色停止:#88001550%和#fff50%
使用100%宽度和3px高度的背景尺寸,即 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
京公网安备 11010802041100号