设置div四个边角的样式

因为在项目中又遇到,所以在这分享下

效果图

实现步骤

html部分

<div class="box">

        <span class="row1"></span>

        <span class="row2"></span>

        <span class="col1"></span>

        <span class="col2"></span>

    </div>

css部分

.box {

        width: 400px;

        height: 260px;

        border: 1px solid #095dd8;

        border-radius: 7px;

        position: relative;     

    }

    span {       

        position: absolute;       

        padding: 15px;

    } 

    .row1 {

        top: -1px;

        left: -2px;

        border-left: 2px solid red;

        border-top: 2px solid red;

        border-top-left-radius: 7px;

    }

    .row2 {

        top: -1px;

        right: -2px;

        border-right: 2px solid red;

        border-top: 2px solid red;

        border-top-right-radius: 7px;

    }

    .col1 {

        bottom: -2px;

        left: -2px;

        border-left: 2px solid red;

        border-bottom: 2px solid red;

        border-bottom-left-radius: 7px;

    }

    .col2 {

        bottom: -2px;

        right: -2px;

        border-right: 2px solid red;

        border-bottom: 2px solid red;

        border-bottom-right-radius: 7px;

    }