当前位置:首页 > CSS教程 > 正文内容

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

搜教程4年前 (2020-04-10)CSS教程226

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。

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17519.html

标签: css边框
分享给朋友:

“css如何实现边框长度控制功能_css教程,css,边框” 的相关文章

box-sizing属性怎样用【css教程】,box-sizing属性,CSS3

box-sizing属性怎样用【css教程】,box-sizing属性,CSS3

css3中的box-sizing属性许能够特定的体式格局定义婚配某个地区的特定元素。 CSS3 box-sizing属性 作用:许可您以确实的体式格局定义顺应某个地区的具体内容。 申明:Internet Explorer、Chrome、Safari 以及 Opera 支撑 box-si...

css target属性怎样用【css教程】,css target属性

css target属性怎样用【css教程】,css target属性

css target属性定义和用法 target 属性是一个简写属性,用于设置以下属性: target-name target-new target-position 语法 target: target-name target-new target-position;...

css content属性怎样用【css教程】,css,content属性

css content属性怎样用【css教程】,css,content属性

css content属性用于插进去生成的内容,常和:before选择器和:after选择器合营运用,消灭浮动或将生成的内容放在一个元素内容的前面或背面。一切浏览器都支撑 content 属性。 css content属性怎样用? content属性用于插进去生成的内容,常和:befor...

css counter-increment属性怎样用【css教程】,css

css counter-increment属性怎样用【css教程】,css

counter-increment 属性设置某个拔取器每次涌现的计数器增量。默许增量是 1。 申明 应用这个属性,计数器能够递增(或递减)某个值,这能够是正值或负值。假如没有供应 number 值,则默许为 1。 解释:假如运用了 "display: none",则没法增添计数。如运用...

在CSS中字体加粗要怎么做?【css教程】,CSS

在CSS中字体加粗要怎么做?【css教程】,CSS

字体加粗 font-weight 属性设置文本的粗细。 运用 bold 关键字能够将文本设置为粗体。 ( 引荐进修:CSS基础教程 ) 关键字 100 ~ 900 为字体指定了 9 级加粗度。假如一个字体内置了这些加粗级别,那末这些数字就直接映射到预定义的级别,100 对应最细的字体变...

为何要消灭浮动?如何消灭?(float)【css教程】,float,清除浮动

为何要消灭浮动?如何消灭?(float)【css教程】,float,清除浮动

一、明白消灭浮动 1、为何要消灭浮动 我们前面说过,浮动实质是用来做一些笔墨混排效果的,然则被我们拿来做规划用,则会有许多的问题涌现。 由于浮动元素不再占用原文档流的位置,所以它会对背面的元素排版发生影响,为了处理这些问题,此时就须要在该元素中消灭浮动。 引荐进修:CSS视频教程 准确...