前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

从条纹边框的实现谈盒子模型

源码分享

类似下面这个图形,只使用一个标签,可以有多少种实现方式:(不考虑兼容性的情况下)



假设我们的单标签为 div:

定义如下通用 CSS:
div{
    position:relative;
    width: 180px;
    height: 180px;
}

NO.1 方案一:div上是棕色背景,伪类是白色背景

在div的css上加背景和border:
div{
    position:relative;
    width: 180px;
    height: 180px;
    background:#9c27b0;
    border:20px dashed #2196f3;
}

再加一个伪类:
div:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:#fff;
}

NO.2 方案二:div上是白色背景,伪类是棕色背景
(主要是background-clip及z-index实现)


在div的css上加背景和border:
div{
    position:relative;
    width: 180px;
    height: 180px;
    background:#fff;
    background-clip:padding-box;
    border:20px dashed #2196f3;
}

再加一个伪类:
div:after{
    content:"";
    position:absolute;
    top:-20px;
    left:-20px;
    bottom:-20px;
    right:-20px;
    background:#9c27b0;
    z-index:-1;
}




转载请注明:前端录»从条纹边框的实现谈盒子模型