一聚教程网:一个值得你收藏的教程网站

最新下载

CSS如何实现边框长度控制功能 CSS实现边框长度控制功能代码示例

时间:2019-12-02 13:41:44 编辑:袖梨 来源:转载

本篇文章小编给大家分享一下CSS实现边框长度控制功能代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

以前需要边框长度比容器小一些时,用div嵌套。后来发现伪类在实现这个效果时很方便,只需要一个div就够了,另外调整padding和margin都不会很麻烦。


border top


border left


border right


border bottom

.box-container {
    position: relative;
    width: 90%;
    color: #777;
}
.border-top {
    background: #b4bcbf;
    padding: 15px;
}
    .border-top:before {
        content: '';
        position: absolute;
        left: 42%;
        top: 0;
        bottom: auto;
        right: auto;
        height: 7px;
        width: 50%;
        background-color: #8796a9;
    }
.border-left {
    background: #dfdad6;
    padding: 15px;
}
    .border-left:before {
        content: '';
        position: absolute;
        left: 0;
        top: 6%;
        bottom: auto;
        right: auto;
        height: 52%;
        width: 5px;
        background-color: #a89d9e;
    }
.border-right {
    background: #eee9c4;
    padding: 15px;
}
    .border-right:after {
        content: '';
        position: absolute;
        left: auto;
        top: auto;
        bottom: 5px;
        right: 0;
        height: 52%;
        width: 5px;
        background-color: #f39c81;
    }
.border-bottom {
    background: #bcdc9d;
    padding: 15px;
}
    .border-bottom:after {
        content: '';
        position: absolute;
        left: 18px;
        top: auto;
        bottom: 0;
        right: auto;
        height: 6px;
        width: 105px;
        background-color: #32b66b;
    }

效果如下图:

CSS如何实现边框长度控制功能 CSS实现边框长度控制功能代码示例

网站留言

热门栏目