本文介绍了一种使用CSS来实现矩形边角加粗的方法，通过定位和伪元素创建四个角落的边框，从而达到自定义边角加粗的效果。示例代码详细展示了如何设置不同方向的边框宽度和颜色，适用于网页设计中需要特殊边框效果的场景。
css实现矩形边角加粗
body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.main{
position: relative;
width: 400px;
height: 200px;
border: 1px solid red;
}
.main span:nth-child(1){
position: absolute;
left: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 0 0 5px;
}
.main span:nth-child(2){
position: absolute;
right: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 5px 0 0;
}
.main span:nth-child(3){
position: absolute;
right: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 5px 5px 0;
}
.main span:nth-child(4){
position: absolute;
left: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 0 5px 5px;
}
标签：main,solid,width,加粗,5px,position,边角,border,css
来源： https://www.cnblogs.com/Horizong/p/10976450.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
