[英]How to make a flat not solid border using css?
I want to make a flat border like this one,我想做一个像这样的扁平边框,
It not should be like this one:它不应该像这样:
.demo{ height: 60px; width: 90%; margin: 2rem auto; border-width: 5px; border-style: solid; border-color: #007bff #ddd; }
<div class="demo"></div>
I think it was made by CSS before/ after.我认为它是由 CSS 之前/之后制作的。 But Remember that It actually not made by using border property.但请记住,它实际上不是使用边框属性制作的。 I need the same things like this photo.我需要像这张照片一样的东西。 I have no idea that how to made it.我不知道该怎么做。 [Q1] Is I need many span or before after width? [Q1]我需要很多span还是before after width? (Please give a simple design) (请给出简单的设计)
[Q2] How WordPress make their article title box? [Q2] WordPress如何制作文章标题框? are they used before/after or many span elm?它们是在之前/之后使用还是在许多跨度榆树之前使用? (I already inspect WordPress editor but nothing find) (我已经检查过 WordPress 编辑但没有找到)
.demo { height: 60px; width: 90%; margin: 2rem auto; position: relative; border-left: 4px solid #000; box-sizing: border-box; }.demo::after { top: 0; left: 0; content: ''; width: 100%; height: 100%; position: absolute; box-sizing: border-box; border: 1px solid #ddd; border-left: none; }
<div class="demo"></div>
Try this, its a little hack with :before
property:试试这个,它是:before
属性的一个小技巧:
.demo{
border-left: solid 5px black;
width: 90%;
height: 50px;
position:relative;
}
.demo:before{
content:"";
top: 0;
left: 0;
position:absolute;
border: 1px solid lightgray;
border-left:none;
width: 100%;
height: 100%;
box-sizing: border-box;
}
Or another way you can achieve like this:或者你可以这样实现的另一种方式:
HTML HTML
<div class="card">
<div class="left-pad"></div>
<div class="demo"></div>
</div>
CSS CSS
.card {
display: flex;
align-items: center;
}
.left-pad {
width: 5px;
height: 50px;
background: black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.demo{
border: solid 1px gray;
border-left: 0px;
width: 200px;
height: 50px;
}
May be it helps可能有帮助
Gradient can do it.渐变可以做到。 Simply adjust the order to control which one will be on the top只需调整顺序即可控制哪个在最前面
.demo{ height: 60px; width: 90%; margin: 2rem auto; border: 5px solid transparent; background: linear-gradient(#007bff,#007bff) left /5px 100%, /* The top layer */ linear-gradient(red,red) right /5px 100%, linear-gradient(#ddd,#ddd) bottom /100% 2px, linear-gradient(blue,blue) top /100% 2px; /* The bottom layer */ background-repeat:no-repeat; }
<div class="demo"></div>
try this:- display: table;试试这个:- 显示:表格;
.demo {
display: table;
border-collapse: collapse;
width: 90%;
margin: 2em auto;
}
.cell {
display: table-cell;
border: 1px solid #b6bdc2;
width: 90%;
height: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-left-width: 4px;
border-left-color: #5d646c;
}
<div class="demo">
<div class="cell"></div>
</div>
May be it helps可能有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.