zoukankan      html  css  js  c++  java
  • CSS边框长度控制

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

    <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;
         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;
             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%;
             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%;
             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;
             105px;
            background-color: #32b66b;
        }

    效果如下图: 
    border length

  • 相关阅读:
    冒泡排序
    数组去重
    DOM 操作入门(二)
    DOM 操作入门(一)----- 在指定位置动态插入节点
    事件流的捕获和冒泡 ---- 事件对象
    call, apply, bind -----【改变this指向的三大利器】
    闭包和垃圾回收机制
    回调函数 -----【全球化下的产业分工】
    处理Excel表格里面的数据
    Web后台获取服务器相关信息
  • 原文地址:https://www.cnblogs.com/weibo806/p/8023431.html
Copyright © 2011-2022 走看看