设置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;

    }