效果如图
此图只实现 左下与右下边角样式
右上与左上同理文章来源：https://www.toymoban.com/news/detail-682829.html
/* 容器 */
.card-mini {
position: relative;
}
/* 左下*/
.card-mini::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 20px;
height: 20px;
border-bottom: 2px solid #253d64;
border-left: 2px solid #253d64;
border-bottom-left-radius: 10px;
}
/* 右下*/
.card-mini::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
border-bottom: 2px solid #253d64;
border-right: 2px solid #253d64;
border-bottom-right-radius: 10px;
}
右上与左上 将上面的bottom改为top文章来源地址https://www.toymoban.com/news/detail-682829.html
.card-mini::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-top: 2px solid #253d64;
border-left: 2px solid #253d64;
border-top-left-radius: 10px;
}
.card-mini::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
border-top: 2px solid #253d64;
border-right: 2px solid #253d64;
border-top-right-radius: 10px;
}
到了这里，关于css 实现四角边框样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
