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

  • 相关阅读:
    搭建kafka高级消费 (high-consumer)php7
    kafka搭建到配置borker集群(项目开发-区块链)
    快速提高谷歌浏览器(Chrome)自带下载器的网速
    利用IO和File类实现拷贝文件目录问题
    随机红包小算法
    二叉树前序中序后序层序遍历问题
    荷兰国旗问题
    二分法查找
    找出数组中最大值and索引
    数组元素反转
  • 原文地址:https://www.cnblogs.com/weibo806/p/8023431.html
Copyright © 2011-2022 走看看