CSS 实现四角加粗
<div class="border_style">
<div class="main">
<span></span>
<span></span>
<span></span>
<span></span>
<div>3
<b>台</b>
</div>
</div>
</div>
<style lang="less" scoped>
.border_style {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;margin: 10px;
.main {
position: relative;
width: 400px;
height: 200px;font-size: 30px;display: flex;flex-direction: column;align-items: center; justify-content: center;
border: 1px solid red;
b{
display: block;
}
span {
&:nth-child(1) {
position: absolute;
left: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 0 0 5px;
}
&:nth-child(2) {
position: absolute;
right: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 5px 0 0;
}
&:nth-child(3) {
position: absolute;
right: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 5px 5px 0;
}
&:nth-child(4) {
position: absolute;
left: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 0 5px 5px;
}
}
}
}
</style>
右上角标签和精华
<div>
<img src="https://bdm.gacmotor.com/img/login_bg.a8a22aaa.png" alt="">
<div class="">
<div class="note">
<span class="tag_bg">文字内容 </span>
<span>售后利润提升优秀案例分享</span>
</div>
<div class="tag_tag">
<a-space>
<a>终端销量</a>
<a>1年店龄</a>
</a-space>
</div>
</div>
<div class="tag_bottom">
<p>2022/02/08</p>
<p>
<a-icon type="eye"/>
1695
</p>
<p>
<a-icon type="dislike" :rotate="180"/>
1695
</p>
<p>
<a-icon type="heart"/>
1695
</p>
<p>
<a-icon type="download"/>
</p>
</div>
<p class="ribbon">
<a-icon type="star" theme="filled"/>
<span>精华</span>
</p>
<span class="leftLabel">学习中</span>
</div>
<style lang="less">
.leftLabel {
display: block;
position: relative;
width: 45%;
height: 2em;
background-color: #2FB270;
color: #ffffff;
font-weight: bold;
line-height: 28px;
text-align: center;
float: left;bottom: 118%;left: -25%;
transform: translate(25%, 20%) rotate(-45deg);
box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 1px #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);z-index: 1;
}
.ribbon {
width: 10px;position: relative;left: 85%;top: -104%;
height: 50px;
border-left: 15px solid #F0580D;
border-right: 15px solid #F0580D;
border-bottom: 10px solid transparent;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;
i {
position: relative;left: -7px;color: #FFD200;top: 2px;
}
span {
display: block;color: #ffffff;width: 40px;font-size: 12px;position: relative;left: -12px;
}
}
</style>