设计给这样的稿子不是折腾人嘛...哎，没办法，作为一个负责任的打工仔，我是不会简单粗暴的直接切图的。嗯。能用CSS画边框，就不用图片。
<style>
*{ /*实际开发中，别这样偷懒哦*/
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 320px;
height: 100px;
border-bottom: 2px solid #4c4c4c;
border-top: 3px solid #00b9b7;
display: flex;
align-items: center;
margin: 20px auto;
justify-content: space-between;
}
.box div{
}
span{
display: block;
}
.left_top{
flex: 1.5;
border-left: 2px solid #00b9b7;
height: 66px;
margin-bottom: 1px;
}
.left_bottom{
flex: 1;
border-left: 2px solid #4c4c4c;
height: 33px;
}
.txt{
width: 292px;
}
.right_top{
flex: 1;
border-left: 2px solid #00b9b7;
height: 33px;
margin-bottom: 1px;
}
.right_bottom{
flex: 1.5;
border-left: 2px solid #4c4c4c;
height: 66px;
}
</style>
</head>
<body>
<div class="box">
<div class="box_left">
<span class="left_top"></span>
<span class="left_bottom"></span>
</div>
<div class="txt">随便一段文字</div>
<div class="box_right">
<span class="right_top"></span>
<span class="right_bottom"></span>
</div>
</div>
</body>
时间： 2024-08-10 08:37:36