CSS并不简单--走进border、box-shadow和outline

这篇文章主要介绍标题中三个属性独特的一面。不独特你打我）:

1、border

  其实对于border,想必你们已经了解不少了。因此我就不啰嗦太多的基本东西。

  好比border-radius咱们只须要看这张图:

  如今咱们来看看border的真实面貌：

width: 0;
    height: 0;
    border: 30px solid transparent;
	border-top-color: rgb(222,11,22);
    border-left-color: rgb(20,100,200);
    border-right-color: rgb(1,200,200);
    border-bottom-color: rgb(100,20,200);
复制代码

  利用这一点咱们能作出什么呢？微信的消息框：

.item {
    	position: relative;
        width: 150px;
        height: 50px;
        background: #fff;
        border-radius: 5px;
        line-height: 50px;
        &::after {
    	    content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-right-color: #fff;
            top: 15px;
            left: -20px;
        }
    }
复制代码

  你看看之后再遇到用小三角的，是否是so easy! 哪怕是要用两个。可能讲到这里，很多同窗就很不乐意了，这些明明我多懂。来个新鲜的行不行？客官往下看：

  what?别告诉我这也是用border画的！心细的同窗应该会看出来，这不就是dashed的样式吗？的确是用了dashed，可是咱们多知道dashed这个样式，咱们不能修改它虚线的间距，这点很头疼。因此这里这个图案出现的有那么一点碰巧，可是它揭露了背景颜色会渗透到border的下面。

  因此，当你要实现一个半透明的边框时，并非一个容易的事，你还须要结合background-clip。

  聪明的同窗又要问了，你这个图案实现的太巧合了，在不少状况下，dashed并不能像咱们预期的那样。哈哈。接下来从box-shadow的讲解中，我会给你个十全十美的方案。

2、box-shadow

  这里我就不说什么单边阴影，双边阴影了。直接接着上面的话题吧。要实现上面的图案，首先你要明白，box-shadow是支持逗号分隔语法的。不卖关子，看代码:

width: 100px;
    height: 100px;
    background: rgb(200,100,200);
    box-shadow: 40px 0 0 -20px rgb(200,100,200),
                -40px 0 0 -20px rgb(200,100,200),
                0 40px 0 -20px rgb(200,100,200),
                0 -40px 0 -20px rgb(200,100,200);
复制代码

  我靠！阴影的尺寸还能是负数，是否是很惊讶。实际上，当阴影为负数时，阴影向内扩散，是否是很神奇，是否是很完美。

  这里咱们还能够利用box-shadow来制造图片翘边的效果，这里咱们要结合transform。

.item {
	    position: relative;
        width: 240px;
        height: 320px;
        background: url(../assets/images/head.jpeg) no-repeat center / 240px 320px;
        border: 5px solid #fff;
        &::before {
    	    content: "";
            display: block;
            position: absolute;
            top: 150px;
            left: 70px;
            width: 150px;
            height: 150px;
            box-shadow: 5px 5px 15px 10px rgb(213,213,213);
            transform: skewX(20deg) rotate(15deg);
            z-index: -100;
        }
    
        &::after {
    	    content: "";
            display: block;
            position: absolute;
            top: 18px;
            left: 12px;
            width: 150px;
            height: 150px;
            box-shadow: 0 0 15px 10px rgba(0,0,0,.2);
            transform: skewX(20deg) rotate(15deg);
            z-index: -100;
        }
	}
复制代码

  这里咱们要记住一点，不管你用box-shadow像外扩展了多少，并不影响元素自己的大小。

3、outline

  与box-shadow类似的是，它的大小也不影响元素的大小。这里可能须要讲的，就是不要忽略outline-offset，并且它能够取负值。

.item {
    	width: 100px;
        height: 100px;
        outline: 10px solid rgb(110,110,110);
        outline-offset: -45px;
        border: 10px solid rgb(110,110,110);
        border-radius: 50%;
    }
复制代码

---

  喜欢本文的小伙伴们,欢迎关注个人订阅号超爱敲代码,查看更多内容.