CSS中给矩形边角加粗的效果怎么实现，原理是什么

来源：恒创科技编辑：恒创科技编辑部

2024-01-12 05:42:59

这篇文章主要介绍了CSS中给矩形边角加粗的效果怎么实现，原理是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS中给矩形边角加粗的效果怎么实现，原理是什么文章都会有所收获，下面我们一起来看看吧。

1、工具/原料

html css

2、具体实现

效果图

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之间的关系就可以了

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"CSS中给矩形边角加粗的效果怎么实现，原理是什么"的内容，大家可以关注恒创科技的其它相关文章。

本文地址：https://www.henghost.com/jishu/16504/