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

发布时间：2023-10-26 15:21:39 所属栏目：语言来源：

导读：一定借鉴价值，相信大家阅读完这篇CSS中给矩形边角加粗的效果怎么实现，原理是什么文章都会有所收获，下面我们一起来看看吧。

1、工具/原料

html

css

2、具体实现

html代码

<body>

<

一定借鉴价值，相信大家阅读完这篇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之间的关系就可以了

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!