border、outline、boxshadow那些事以及如何作内凹圆

border

边框是咱们美化网页、加强样式最经常使用的手段之一。例如：

<div class="text"></div>
    .text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

但有些时候，咱们的需求是给一个容器加上多重边框，最容易想到的是给它多加一层标签：

<div class="text-outborder">
    <div class="text"></div>
</div>

.text-outborder {
    width: 274px;
    height: 274px;
    border: 10px solid #03D766;
}

.text {
    margin: auto;
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

不过有些时候，咱们可能没法修改结构，或者修改结构的成本很高，此时就须要咱们在纯 CSS 层面解决这个问题。

outline

这时候能够经过 outline 属性来解决：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 10px solid #BC9E9C;
}

描边有一个好处在于，它跟边框相似，能够设置各类线型，好比虚线：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 5px dashed #CE843B;
}

有趣的是，还有一个 outline-offset 属性，能够控制描边的偏移量。

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: 10px;
}

咱们能够把 outline 扩展出去：

outline-offset

并且 outline-offset 还支持负值，能够将 outline 叠加在 border 之上:

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: -12px;
}

利用这个特性能够玩出不少好玩的效果。

不过描边有一个缺陷——若是这个容器自己有圆角的话，描边并不能彻底贴合圆角。目前全部浏览器的行为都是这样的：

box-shadow

若是你须要使用圆角，那么你就得另寻它法了。接着，咱们又想到了 box-shadow 属性：

咱们一般是这样设置投影的：

box-shadow: 0 5px 5px #000;

前面三个长度值，再加一个颜色值。

前两个长度值分别表示投影在水平和垂直方向上的偏移量，第三个长度值表示投影的模糊半径（也就是模糊的程度）；颜色值就是投影的颜色。

若是咱们把前三个值都设为零，其实是没有任何效果的。由于若是投影即不偏移也不模糊，恰好会被这个元素本身严严实实地遮住。

box-shadow第四个长度值

不少人可能不知道的是，投影还能够有第四个长度值。这个值表示投影向外扩张的程度：

box-shadow: 0 0 0 10px #FF0000;

这样，投影就会从元素的底下露出一圈了。

关于投影，另一个不是每一个人都知道的特性是，投影属性其实能够接受一个列表，咱们能够一次赋予它多层投影，像这样：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    border-radius: 50px;
    box-shadow: 
        0 0 0 10px #FB0000,
        0 0 0 20px #FBDD00, 
        0 0 0 30px #00BDFB;
}

这样咱们就获得了超过两层的 “边框” 效果了。

投影的另一个好处是，它的扩张效果是根据元素本身的形状来的。若是元素是矩形，它扩张开来就是一个更大的矩形；若是元素有圆角，它也会扩张出圆角。

注意事项

因为描边和投影都是不影响布局的，因此若是这个元素和其它元素的相对位置关系很重要，就须要咱们之外边距等方式来为这些多出来的 “边框” 腾出位置，以防被其它元素盖住。

所以，从这个意义上来讲，使用内嵌投影彷佛是更好的选择。由于内嵌投影让投影出如今元素内部，咱们能够用内边距在元素的内部消化掉这些额外 “边框” 所须要的空间，处理起来更容易一些。

内凹圆

标签页咱们都很熟悉了，它是一种经常使用的 UI 元素。

咱们把它拉近来看一看：

这个标签仍是比较美观的，咱们用圆角让它看起来很接近真实的标签造型。不过咱们也注意到，它底部的两个直角看起来彷佛有点生硬。

因此设计师本来指望的效果多是这样的：
][14]

这样就天然多了。但这看起来彷佛很难实现啊！

咱们的难点主要在这里：

这个特殊的形状如何实现？

咱们把它放大来看一下：

首先咱们可能会想到用图片。这固然是可行的，但图片有种种局限，咱们最好仍是彻底用 CSS 来实现它。

好，接下来咱们来分析一下它的形状。它其实就是一个方形，再挖掉一个 90° 的扇形。因而咱们试着建立一个方形，再用背景色作出一个扇形叠加上去：

看起来好像能够了。但这是骗人的啊！

把它放在复杂背景下，立马就露馅了——扇形部分不是透明的：

如何实现内凹圆角

因此，咱们的问题就变成了如何用CSS实现内凹圆角。

对于普通外凸的圆角，咱们都已经很是熟悉了，咱们用圆角属性就能够获得：

但咱们须要的是一个内凹的圆角形状。

这是一个实实在在的需求，因而有开发者曾经提议，扩展圆角属性，让它支持负值。若是是负值，圆角就再也不是外凸的，而是内凹的。这个提议听起来彷佛颇有道理，语法设计也很紧凑。

但实际上它的语义不够准确。所以 CSS 工做组并无接受这个提议，并未将它归入标准。

这条路走不通，咱们还须要继续探索。

咱们顺着这个方向，头脑中很天然地会迸出这个疑问：CSS中还有和圆形有关的属性吗？

答案固然是有！

径向渐变

“径向渐变” 特性就是跟圆形有关的。

线性渐变

不过它稍稍有些复杂。在讲解径向渐变以前，咱们先来看一看比较简单的 “线性渐变”。

说到渐变，那天然须要有一个容器。而后，还须要有两种颜色。渐变的颜色设置咱们称之为 “色标”——每一个色标不只有颜色信息，还有位置信息。

咱们给起点和终点的色标分别设置颜色，就能够获得一条渐变图案：

接下来，关于渐变，咱们其实能够设置不止两个色标。好比咱们能够在中央再增长一个色标。请注意咱们特地选择了跟起点色标同样的颜色。咱们获得的效果以下：

咱们发现，渐变只发生在颜色不一样的色标之间。若是两个色标的颜色相同，则它们之间会显示为一块实色。

好的，咱们继续增长色标。此次咱们在渐变地带的中央增长一个色标，且让它的颜色和终点色标相同：

根据上面的经验，这个结果正是咱们所预料的——渐变只发生在颜色不一样的色标之间。

接下来，咱们玩点更特别的，咱们把中间的两个色标相互靠近直至重合，会发生什么？

实际上这个渐变也会趋向于零。也就是说，虽然这本质上仍然是一个 “渐变” 图案，但通过咱们的精心设计以后，咱们最终获得了两个纯色的色块条纹。

若是咱们把终点颜色换为透明色……

咱们甚至还会获得实色和透明色间隔的条纹。

再来看径向渐变

好的，接下来咱们来看径向渐变。它稍稍有些复杂，但原理是同样的。

一样，咱们须要有一个容器。但对径向渐变来讲，顾名思议，全部色标是排布在一条半径上的。也就是说，咱们还须要有一个圆心。默认状况下，圆心就是这个容器的正中心：

而这条半径就是圆心指向容器最远端的一条假想的线：

接下来，咱们要设置一些色标：

说到这里，就要讲解一下径向渐变的特别之处。全部色标的颜色变化推动不是像线性渐变那样平行推动的，而是以同心圆的方式向外扩散的——就像水池里被石子激起的涟漪那样。

看到这个色标的分布，咱们应该能够想像出线性渐变的结果是什么；但这里咱们把它按照径向渐变的特征来推演一下，实际上最终的效果是这样的：

咱们把全部辅助性的标记都去掉，只留下渐变图案：

这是一个穿了个窟窿的实色背景。很好玩是吧？不过不要忘了咱们是为何来到这儿的——咱们是为了获得一个内凹圆角的形状。

细心的朋友可能已经发现了，咱们须要的东西已经出现了：

接下来，咱们调整一下圆心的位置和容器的尺寸，就能够获得这个内凹圆角的造型了。

内凹圆具体代码例子

具体代码例子以下：

.text {
    width: 254px;
    height: 254px;
    background:
      -moz-radial-gradient(
          100% 0%, 
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 71%,
          #0059FF 0%;
      );
}

内凹圆完成

利用这个技巧，咱们用纯 CSS 最终实现了这个看似不可能的 “圆润的标签页” 效果！

原文连接：https://github.com/cssmagic/blog/issues/54#rd