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

最新推荐文章于 2024-07-26 08:45:03 发布

descire

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量3.6k

点赞数

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/dai_qingyun/article/details/72525970

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

一、border

其实对于border,想必大家已经了解很多了。所以我就不啰嗦太多的基本东西。

比如border-radius我们只需要看这张图:

![image](http://o8sux93eg.bkt.clouddn.com/blog_2017_05_19_01.gif)

现在我们来看看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);

![image](http://o8sux93eg.bkt.clouddn.com/blog_2017_5_19_02.jpeg)

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

![image](http://o8sux93eg.bkt.clouddn.com/blog_2017_05_19_03.jpeg) ```css 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! 哪怕是要用两个。可能讲到这里，不少同学就很不乐意了，这些明明我多懂。来个新鲜的行不行？客官往下看： ![image](http://o8sux93eg.bkt.clouddn.com/blog_2017_05_19_04.jpeg)

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

所以，当你要实现一个半透明的边框时，并不是一个容易的事，你还需要结合background-clip。

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

二、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。

![image](http://o8sux93eg.bkt.clouddn.com/blog_2017_05_19_05.jpeg)

	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像外扩展了多少，并不影响元素本身的大小。

三、outline

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

	width: 100px;
    height: 100px;
    outline: 10px solid rgb(110,110,110);
    outline-offset: -45px;
    border: 10px solid rgb(110,110,110);
    border-radius: 50%;