旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css如何实现边框长度控制功能_css教程

作者:搜搜PHP网发布时间:2020-04-10分类:CSS浏览:65


导读:css如何控制网页背景颜色_css教程本文为大家介绍了css控制网页背景颜色的方法,具有一定的参考价值,希望可以帮助到大家。背景颜色:【background-color】;背景图片...

css如何控制网页背景颜色_css教程

本文为大家介绍了css控制网页背景颜色的方法,具有一定的参考价值,希望可以帮助到大家。背景颜色:【background-color】;背景图片:【background-image】。

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

(推荐教程:CSS入门教程)

详细介绍css中的数学表达式calc()_css教程

本文来自CSS教程栏目,文中为大家详细介绍了css中的数学表达式calc(),具有一定的参考价值,希望可以帮助到大家。数学表达式calc()是CSS中的函数,主要用于数学运算。

<div class="content-block">
<div class="box-container">
<div class="border-top">border top</div>
</div>
<div class="box-container">
<div class="border-left">border left</div>
</div>
<div class="box-container">
<div class="border-right">border right</div>
</div>
<div class="box-container">
<div class="border-bottom">border bottom</div>
</div>
</div>
.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如何实现边框长度控制功能的详细内容,更多请关注ki4网其它相关文章!

css如何实现下划线滑动效果_css教程

本文为大家介绍了css实现下划线滑动效果的方法,具有一定的参考价值,希望可以帮助到大家。实现滑动效果主要是利用伪类标签,以及hover。

标签:css边框