使用宽度为0实现凹凸形状

直接上代码：

<div></div>

div {
    width:0;
    font-size: 50px;
}

div:before {
    /* content: '好 easy 好';凸 */
    content: 'easy好easy ';
    outline: 10px solid blue;
}

一个宽度为0的div元素，配上一个伪元素就实现了，注意这里要用outline,用border是不会出现想要的效果的（至于为什么border不行，现在还没搞懂）

:before伪元素用来在元素之前添加内容，可以是文字也可以是图片或者音频，它默认是行内元素，不过可以通过display属性来做改变。

以上代码实际上相当于：

<div>
    <span style="outline: 10px solid blue;">easy好easy</span>
</div>

div {
    width:0;
    font-size: 50px;
}

不过一般不采用这种写法，使用伪元素清晰可维护性又强。

 

border和outline的区别：
border是边框，是占位置会计算在元素尺寸内的，而outline是位于边框边缘的外围轮廓，包含了边框，并且不占位置，并且outline不一定是矩形哦。因为不占位置，outline可以很好的用来突出某一个元素。