css之条纹边框的实现

感谢chokcoco大佬，题目和解题思路来源：http://www.cnblogs.com/coco1s/p/5895764.html。

主要记录通过这个题目而恶补的css属性们。

题目：下面这个图形，只使用一个标签，可以有多少种实现方式：

拿到题的第一个想法是，可以设置底下为全蓝，边框是虚线粉，中间一片白色。

于是有了第一种最简单的解法：

#div1 {
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px dashed deeppink;
            background-color: deepskyblue;
        }
#div1::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
        }

这里我们稍稍复习一下border-style:

dotted------点状

solid--------实线

dashed-----虚线

double-----双线

机智的盆友此刻一定会说：那我把after设大一点，然后让它移到div下面去不就又是一种方法了嘛~

那么，接下来有请我们的第二种方法闪亮登场：

#div1 {
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px dashed deeppink;
            background-color: white;
            background-clip: content-box;
        }
#div1::after {
            z-index: -1;
            content: "";
            position: absolute;
            top: -20px;
            left: -20px;
            bottom: -20px;
            right: -20px;
            background-color: deepskyblue;
        }

这个方法中用到的知识点稍微有点多，让我们一条条地来梳理。

①background-clip规定了从XX区域向外裁剪背景

border-box：从border区域向外裁剪背景。（默认）padding-box：从padding区域向外裁剪背景。content-box：

从content区域向外裁剪背景。

在background-repeat:no-repeat的情况下：

以上是background-color，那我们用background-image来做个对比实验：

欸？！注意观察喷枪的位置！为什么左上角是从padding-box开始绘制的，而结束却遵循border-box？

②background-image开始绘制的位置

background-image默认开始绘制的位置是padding-box左上角，painting area（绘制区间）是由background-clip决定的

而positioning area （起始点位置）是由background-origin决定的。

下图为background-origin三个值的不同显示方式：

③::after绘制起始点

无论是用display:block还是position:absolute来控制伪元素，绘制起点都是padding-box的左上角，所以如果是display:block，需要添加margin-top:-20px;margin-left:-20px;如果是position:absolute则需要top:-20px;left:-20px。

④z-index:-1

在使用display:block的过程中发现，z-index只能配合着positioned元素一起使用（relative、absolute、fixed），默认static情况下是无效的！所以div::after的position:absolute至关重要！

第三种方法了解一下

思路是：下面实线border，上面虚线outline。

尝试此方法时恰好解决了上一篇博客中遗留下来的问题：outline 不会像border那样影响元素的尺寸或者位置什么意思呢？

#div1 {
            margin-left: 5px;
            width: 180px;
            height: 180px;
            position: relative;
            border: 20px solid deepskyblue;
            background-color: white;
        }
#div1::after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            outline: 20px dashed deeppink;
        }

因为outline不占用元素的尺寸位置，::after的计算位置是从padding最外开始算起，这个算起并不包括outline，所以outline肯定会和border重合。

 

第四种方法

#div1 {
            width: 180px;
            height: 180px;
            border: 20px dashed deeppink;
            background-color: deepskyblue;
            box-shadow: 180px 0 0 0 white inset; 
        }

内阴影也是从padding-box开始算的，所以不会挡住border

下图是内阴影和外阴影的对比图：

哦~我可怜的border~

谁都不带你玩儿