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

lewis 1年前 (2024-03-12) 阅读数 4 #技术

这篇文章主要介绍了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中给矩形边角加粗的效果怎么实现，原理是什么"的内容，大家可以关注博信的其它相关文章。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：PHP文件打开的方式有几种，怎么做下一篇： Boost是一个流行的C++库集合，提供了许多功能强大的工具和组件，可以帮助C++开发者更高效地完成工作

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

版权声明

作者文章