Html 单个<；部门>；盒形阴影=6圈。它是如何工作的？

当然，这是CSS3大师的问题。我用

框阴影

来制作按钮、情态动词等，但我从没想过我们可以这样使用

HTML

<div></div>

我只看到了代码和结果（没有解释）。现在，我试图理解枚举为六（N）个长方体阴影的单div是如何渲染的：

输出

请解释我（或给我任何解释的链接），渲染器在这种情况下是如何工作的。谢谢

---

jsIDLE:.

框阴影样式在这里有以下语法：

box-shadow: [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]+

框阴影：[？？？]+

（来源：）-其中

+

表示组可以重复1次或多次，而

？

表示该值是可选的

这意味着第一个点是由盒影：-75px-125px 0 40px#6cce74创建的，，相对于它所用的div有一个坐标（-75，-125）偏移。它的模糊半径为0（所以没有模糊），扩散半径为40px（所以半径为40px）

然后对其他5个具有不同坐标和颜色的点重复此操作。每个阴影获得不同的坐标和不同的颜色，这导致6个点以这种方式定位和着色

---

PS：我建议（在Chrome:）右键单击该小提琴中的结果框，然后单击“Inspect Element”（底部选项），然后向下导航到您将找到的DOM树（您将打开一个选中了

或

的面板，您将希望向下导航到该树，最终到达

）。在该界面中，您将看到应用于元素的样式。要想让事情变得更清楚一点，您可以先单击显示的面板样式部分中的

框阴影

样式，然后将光标放在您在那里看到的任何数字上，然后按向上/向下箭头。如果按向上/向下箭头，它将输入/减少您选择的数字，并动态更新结果。如果这样做，您可以直接看到更改的每个值会发生什么。

您可以用逗号分隔

框阴影的不同实例，这对于创建看起来“按下”页面的3D按钮或文本框非常有用

有关守则：

box-shadow:
   -75px -125px 0 40px #6cce74,
   75px -125px 0 40px #c18d46,
   150px    0px 0 40px #c14745,
   75px  125px 0 40px #2e1e5b,
   -75px  125px 0 40px #9c37a6,
  -150px    0px 0 40px #76bdd1;

这些声明中的每一个都是一个单独的影子。因此，在您的示例中，代码创建了一个小的空（因此不可见）圆形
div
，并为其提供了6个不同位置的阴影。此效果也可用于此效果：

HTML:


更改
框阴影
规则中的任何属性都会更改六个圆中的一个
您指的是一个div如何渲染六个圆吗？是的。有六盒阴影。怎么做？我想因为你在分配静态大小和位置，它会显示为六盒阴影…我个人从未见过，但这很奇怪。好吧！谢谢你回答的第二部分和附言！您的输入标记中有一个未关闭的引号。
box-shadow:
   -75px -125px 0 40px #6cce74,
   75px -125px 0 40px #c18d46,
   150px    0px 0 40px #c14745,
   75px  125px 0 40px #2e1e5b,
   -75px  125px 0 40px #9c37a6,
  -150px    0px 0 40px #76bdd1;

<input type='text'>

html {
background: grey;
}

input {
    border: 1px solid black;
    box-shadow: inset 1px 1px 9px rgba(0,0,0,.3), inset -1px -1px 9px rgba(0,0,0,.3); /* note the separated declarations */
    line-height: 25px;
    border-radius: 4px;
}