2

在哪里可以找到有关 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>

关联

谁能解释一下它是如何工作的？这适用于所有浏览器吗？

谢谢。

4

2 回答 2

2

  1. 一个元素上可以有多个盒子阴影。可以添加很多，如示例中

  2. 前两个位置的值相对于其父对象拉动阴影。它们可以被认为是坐标，每个盒子阴影是一个块，前两个位置的值是它的坐标

  3. 第二对值，在位置 3 和 4 中定义了阴影的模糊度和它的大小。通过将这两者都设置为 0，阴影有一个平坦的边缘，并且与它的父元素大小相同。由于父元素是一个 1em 块，这意味着阴影创建了一个 1em 框

  4. 在父元素上设置的 em 值 1 从在大多数浏览器中采用默认字体大小 16px 开始，并创建一个 16px 正方形的框。

  5. 然后阴影都是 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（即使没有前缀）也得到了很好的支持，并且 em 从年点开始就出现了，它们甚至比 IE6 中的像素更受欢迎

于 2015-08-20T20:00:41.373 回答
2

当您插入新参数“...0 1em 0 1em red, -2.5em 1.5em 0 .5em red, ...”时，您将使用您设置的特征创建新的阴影。让我们举个例子：0 1em 0 1em red。第一个参数设置阴影相对于 div 的水平位置。正值意味着向右递增，向左递增。第二个参数设置垂直位置。正意味着更低，负意味着更高。下一个参数是阴影的模糊、扩散和颜色。

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

有关详细信息，请参阅：http ://www.w3schools.com/cssref/css3_pr_box-shadow.asp 我相信您从以下网址获得了空间入侵者：http: //joshnh.com/weblog/drawing-things-with-box -阴影/

于 2015-08-20T20:01:51.147 回答