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

tanzj2004 2年前
   <p>这篇文章主要介绍标题中三个属性独特的一面。不独特你打我):</p>    <h2>一、border</h2>    <p>其实对于border,想必大家已经了解很多了。所以我就不啰嗦太多的基本东西。</p>    <p>比如border-radius我们只需要看这张图:</p>    <p><img src="https://simg.open-open.com/show/4a748cbe21d87a87e9f86af256be9eb8.gif"></p>    <p>image</p>    <p>现在我们来看看border的真实面貌:</p>    <pre>  <code class="language-css">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);</code></pre>    <p><img src="https://simg.open-open.com/show/b3bec5acd7c42308e76657dddb67548e.jpg"></p>    <p>image</p>    <p>利用这一点我们能做出什么呢?微信的消息框:</p>    <p><img src="https://simg.open-open.com/show/efb6d245d102029cd428c4c8b89ceafd.jpg"></p>    <p>image</p>    <pre>  <code class="language-css">.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;          }      }</code></pre>    <p>你看看以后再遇到用小三角的,是不是so easy! 哪怕是要用两个。可能讲到这里,不少同学就很不乐意了,这些明明我多懂。来个新鲜的行不行?客官往下看:</p>    <p><img src="https://simg.open-open.com/show/493697c5a942b7e96a9f5605f34de0a4.jpg"></p>    <p>image</p>    <p>what?别告诉我这也是用border画的!心细的同学应该会看出来,这不就是dashed的样式吗?的确是用了dashed,但是我们多知道dashed这个样式,我们不能修改它虚线的间距,这点很头疼。所以这里这个图案出现的有那么一点碰巧,但是它揭露了背景颜色会渗透到border的下面。</p>    <p>所以,当你要实现一个半透明的边框时,并不是一个容易的事,你还需要结合background-clip。</p>    <p>聪明的同学又要问了,你这个图案实现的太巧合了,在很多情况下,dashed并不能像我们预期的那样。哈哈。接下来从box-shadow的讲解中,我会给你个十全十美的方案。</p>    <h2>二、box-shadow</h2>    <p>这里我就不说什么单边阴影,双边阴影了。直接接着上面的话题吧。要实现上面的图案,首先你要明白,box-shadow是支持逗号分隔语法的。不卖关子,看代码:</p>    <pre>  <code class="language-css">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);</code></pre>    <p>我靠!阴影的尺寸还能是负数,是不是很惊讶。实际上,当阴影为负数时,阴影向内扩散,是不是很神奇,是不是很完美。</p>    <p>这里我们还可以利用box-shadow来制造图片翘边的效果,这里我们要结合transform。</p>    <p><img src="https://simg.open-open.com/show/23d9b12400cebda39ca35dbbe6666594.jpg"></p>    <p>image</p>    <pre>  <code class="language-css">.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;          }      }</code></pre>    <p>这里我们要记住一点,无论你用box-shadow像外扩展了多少,并不影响元素本身的大小。</p>    <h2>三、outline</h2>    <p>与box-shadow相似的是,它的大小也不影响元素的大小。这里可能需要讲的,就是不要忽略outline-offset,而且它可以取负值。</p>    <pre>  <code class="language-css">.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%;      }</code></pre>    <p><img src="https://simg.open-open.com/show/de8997347fe4adfa0d42c9337f3f535e.jpg"></p>    <p> </p>    <p> </p>    <p> </p>    <p>来自:https://github.com/15751165579/ThinkInCoding</p>    <p> </p>