css 如何实现矩形四个边角加粗的方法

发布时间：2022-12-31 10:21:09 来源：网络

.

聪明的人懂得说，智慧的人懂得听，高明的人懂得问。若要前行，就得离开你现在停留的地方。早安！

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 如何实现矩形四个边角加粗的方法。如果不坚强，懦弱给谁看？更多关于css 如何实现矩形四个边角加粗的方法请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章:

标签： 加粗