CSS 实现矩形四个边角加粗的方法-灵阳星空

先上效果图：

html代码

<body>
    <h1 style="color: red">css实现矩形边角加粗</h1>
    <div class="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

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;
}

原理很简单，只要弄清position:relative,border和left,top之间的关系就可以了。

温馨提示

本站只提供资源，不提供技术支持，介意勿下！资源所标价格，是对本站收集、整理、打包、编辑详情以及本站运营费用的适当补偿，非资源价格，请支持正版，谢谢！
如若发现图片加载失效、演示站或资源下载链接失效，可点击：资源补档，进行反馈，我们将及时修正！如有侵权请在此处通过邮件联系站长，我们会第一时间进行审核处理。

本站资源大多来自网络，版权争议与本站无关，所有资源仅限用于学习和研究目的。不得将其用于商业或者非法用途，否则，一切后果请用户自负。我们不保证资源的长久可用性，通过使用本站资源随之而来的风险与本站无关。您必须在下载后的24小时内，从您的设备中彻底删除所下资源。如果您喜欢该资源，请支持正版软件/程序，购买注册，得到更好的正版服务。

THE END