分享你我的心得.
共乘一片美好网络.

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

    }

赞(0)
未经允许不得转载:小叶白龙博客 » 设置div四个边角的样式
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!