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框
在父元素上设置1的em值首先在大多数浏览器中采用默认字体大小16px，并创建一个16px方框。
然后阴影全部为16px正方形，没有模糊，偏移整数个ems，从而产生块状结果。

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

另一个盒子通过改变盒子阴影的模糊半径变得模糊，而另一个盒子变得更大，再次，ems用于演示这个单元的尺寸继承。

最后将一个块移到错误的坐标

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

以下是关于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，ems自年份开始就已存在，它们甚至是prefered over pixels in IE6

Answer 2

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

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

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

获得了太空入侵者

边框半径/边框/框阴影高级

2 个答案: