[译] box-shadow 属性

   <p>原文地址： <a href="/misc/goto?guid=4959673727821658769" rel="nofollow,noindex">https://bitsofco.de/the-box-shadow-property</a></p>    <p>PS：非直译。有翻译不当的地方，请指出。</p>    <p>CSS3 引入的 box-shadow 属性用来创建阴影效果。阴影效果给我们的二维平面增加了深度的感觉。</p>    <h2>语法</h2>    <p>box-shadow 属性值由五部分组成：</p>    <pre>  box-shadow: offset-x offset-y blur spread color position;</pre>    <p>一定要注意顺序。</p>    <h3>offset-x</h3>    <p>offset-x 用来声明阴影的水平偏移，即阴影在 X 轴上的位置。当值为正数，阴影位于元素的右侧，若值为负数，阴影位于元素的左侧。</p>    <pre>  .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }    .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/b925cd33061a20a1b9f8a738d6d6d28f.png"></p>    <h3>offset-y</h3>    <p>offset-y 用来声明阴影的垂直偏移，即阴影在 Y 轴上的位置。当值为正数，阴影位于元素的下面，若值为负数，阴影位于元素的上面。</p>    <pre>  .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }    .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/c1cb330e9c77d32345cb57f43b071733.png"></p>    <h3>blur</h3>    <p>blur 表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。值为 0 意味着阴影完全不模糊。blur 值越大，边角越不锋利，阴影越朦胧。不允许负值，负值等同于 0。</p>    <pre>  .left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }    .middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }    .right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/1a0042fc1745284af6f1c8bdf981c8eb.png"></p>    <h3>spread</h3>    <p>spread 表示阴影的大小。也可以把这个值看做阴影与元素之间的距离。当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，小于元素尺寸。默认值 0 会保持阴影和元素尺寸一致。</p>    <pre>  .left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }    .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }    .right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/5224460e011aff1a98dbaa4a20159348.png"></p>    <h3>color</h3>    <p>color 表示阴影的颜色。可以是任何颜色单位。参见： <a href="/misc/goto?guid=4959673727919054485" rel="nofollow,noindex">working with colour in css</a></p>    <pre>  .left { box-shadow: 0px 0px 20px 10px #67b3dd }    .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/f57485f7d585c2d6a8fe0c0dd3b142f0.png"></p>    <h3>position</h3>    <p>position 表示阴影的位置，可选项。默认为外部阴影。可以通过使用 inset 关键字来制作内部阴影。</p>    <pre>  .left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }    .right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }</pre>    <p><img src="https://simg.open-open.com/show/2cf211d3afdfddef8cbb2353597397af.png"></p>    <h3>多重阴影</h3>    <p>一个元素的 box-shadow 属性可以接受多个阴影声明，组成一个逗号分隔的列表。</p>    <pre>  .foo {       box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */                  20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */  }    </pre>    <p><img src="https://simg.open-open.com/show/be11385b7f85417bcd8b6f168d19d1f1.png"></p>    <h3>圆角阴影</h3>    <p>box-shadow 属性的 border-radius 由同一个元素的 border-radius 属性来控制。</p>    <pre>  .foo {       box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);      border-raduis: 50%;  }</pre>    <p><img src="https://simg.open-open.com/show/f769485d76569077ae45c5a6066525d3.png"></p>    <h2>组合起来</h2>    <p>把上面各部分组合起来，我们可以用 box-shadow 来创建一些惊人的效果。</p>    <h3>Non-Layout-Blocking 边框的另一种选择</h3>    <p>用 box-shadow 模拟边框，不会影响盒模型以及页面其余部分的布局。利用多重阴影，可以使元素有不同颜色的边框。</p>    <pre>  .simple {      box-shadow: 0px 0px 0px 40px indianred;  }    .multiple {      box-shadow: 20px 20px 0px 20px lightcoral,                  -20px -20px 0px 20px mediumvioletred,                  0px 0px 0px 40px rgb(200,200,200);  }</pre>    <p><img src="https://simg.open-open.com/show/62f207ae5b3da21adb37640b29ad5bf3.png"></p>    <h3>pop-up 效果</h3>    <p>通过对 box-shadow (& transform ) 属性进行变换，可以模拟元素靠近和远离用户的效果。</p>    <pre>  .popup {      transform: scale(1);      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);      transition: box-shadow 0.5s, transform 0.5s;  }  .popup:hover {      transform: scale(1.3);      box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);      transition: box-shadow 0.5s, transform 0.5s;  }</pre>    <p><img src="https://simg.open-open.com/show/eac323fce16b0f849654c7dee1c13d03.gif"></p>    <h3>floating 效果</h3>    <p>给 :after 伪元素添加 box-shadow 。在元素下方创建阴影，来模拟升起和下降。</p>    <pre>  .floating {      position: relative;            transform: translateY(0);      transition: transform 1s;  }  .floating:after {      content: "";      display: block;      position: absolute;      bottom: -30px;      left: 50%;      height: 8px;      width: 100%;      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);      border-radius: 50%;      background-color: rgba(0, 0, 0, 0.2);        transform: translate(-50%, 0);      transition: transform 1s;  }    /* Hover States */  .floating:hover {      transform: translateY(-40px);      transition: transform 1s;  }  .floating:hover:after {      transform: translate(-50%, 40px) scale(0.75);      transition: transform 1s;  }</pre>    <p><img src="https://simg.open-open.com/show/9f1b459b2ad33bc5ae08850d2ce4d004.gif"></p>    <p>box-shadow 不单单是一个创建阴影的工具，使用它还可以创建很多其它复杂的效果。例如： <a href="/misc/goto?guid=4959673727998200854" rel="nofollow,noindex">纸张效果</a> 。</p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673728078728512" rel="nofollow">https://segmentfault.com/a/1190000005340697</a></p>    <p> </p>