Border radius / Border / box-shadow 高级

Question

在 css 中哪里可以找到有关高级边框和框阴影的教程？

我发现了 css 的形状，但无法解释：

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }

<div id="space-invader"></div>

Link

任何人都可以向我解释它是如何工作的吗？这适用于所有浏览器吗？

谢谢。

Answer 1

一个元素上可以有多个框阴影。可以添加很多，如示例
前两个位置的值将阴影拉到与其父对象相关的位置。它们可以被认为是坐标，每个盒子阴影是一个块，前两个位置的值是它的坐标
第二对值，位于位置三和位置四，定义阴影的模糊度及其大小。通过将它们都设置为 0，阴影具有平坦的边缘并且与它的父元素大小相同。由于父元素是一个 1em 块，这意味着阴影创建一个 1em 框
在父元素上设置的 em 值 1 首先采用大多数浏览器中的默认字体大小 16px，然后创建一个 16px 正方形的框。
然后阴影都是 16px 的正方形，没有模糊，偏移整数个 em，产生块状结果。

让我们来看一个编辑过的例子。我们可以立即在这里看到，更改父元素上的字体大小会更改块的大小，因为 em 与字体大小一起使用。我们还可以看到，我们可以通过改变各个框的阴影来设置方块的颜色。

另一个盒子通过改变盒子阴影的模糊半径变得模糊，另一个盒子变得更大，同样，ems 被用来展示这个单位的大小继承。

最后一个方块被移到了错误的坐标

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 1em 0 #5f5, /* BLURRED */
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    12em -1em 0 0 red, /* MOVED OUT OF POSITION */
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 blue, /* COLOURED */
    -4em 1em 0 0 red,
    4em 1em 0 0 blue,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 2em #666, /* MADE LARGER */
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;
font-size: 12px;

    margin: 100px;
  }

<div id="space-invader"></div>

这里有一些关于 ems 的更多信息： http://www.impressivewebs.com/understanding-em-units-css/ https://css-tricks.com/why-ems/

还有一些关于框阴影的信息： https://css-tricks.com/almanac/properties/b/box-shadow/

最后一点：这段代码在浏览器中非常稳定。 Box Shadow（即使没有前缀）是 very well supported and ems have been around since the year dot, they're even prefered over pixels in IE6

Answer 2

当您插入新参数“...0 1em 0 1em red, -2.5em 1.5em 0 .5em red, ...”时，您会创建具有您设置的特性的新阴影。让我们举个例子：0 1em 0 1em 红色。第一个参数设置阴影相对于 div 的水平位置。正值表示向右递增，负值表示向左递增。第二个参数设置垂直位置。正值表示较低，负值表示较高。接下来的参数是阴影的模糊、扩散和颜色。

当您在特定位置放置阴影时，您可以绘制任何图像。

有关详细信息，请参阅：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp 我相信你从 http://joshnh.com/weblog/drawing-things-with-box-shadow/

得到了 space 入侵者

Border radius / Border / box-shadow 高级

Border radius / Border / box-shadow Advanced

css

border

box-shadow