-4

你能再给我解释一下吗，这是我无法理解盒子阴影属性的代码。我试图弄清楚到底是怎么回事，但我可以。非常感谢！

h1 {
    text-shadow: 5px 5px 2px #999;
}
h2 {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
div {
    width: 50%;
    margin: auto;
    background-color: #ff0;
    box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}
 <!DOCTYPE html>
    <html>
    <head>
    	<title>03 - Senke</title>
    </head>
    <a>
    	<img src="">
    </a>
    <body>
    	<h1>03 Senke</h1>
    	<h2>Podnaslov</h2>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </body>
    </html>

4

2 回答 2

1

正如名字所说的那样。Box shadow 属性为您想要的任何元素添加阴影。

  1. 5px 0 10px #aaa 这部分将在右侧应用浅黑色阴影。
  2. 0 5px 10px #aaa 这部分将在底部应用浅黑色阴影。
  3. -5px 0 10px #aaa 这部分将在左侧应用浅黑色阴影。
  4. 0 -5px 10px #aaa 这部分将在上面应用浅黑色阴影。

单个值对中的第一个值会将阴影从左向右移动，而右侧将保持不变。第二个值仅根据值向上/向下移动阴影（+form up down 和 -ve 值自下而上）。第三个值增加了阴影的平滑度（值越大，阴影越平滑），第四个是颜色。

#example1 {
  border: 1px solid;
  padding: 10px;
 box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}
<div id="example1">
  <p>A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset.The optional third value adds a blur effect to the shadow. The shadow color will be inherited from the text color.</p>
</div>

于 2019-04-24T19:15:51.380 回答
0

而不是这样写：

box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;

尝试这个：

box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.75);

简而言之，每个值对应于以下内容：

我建议忽略边框，在您的示例中看起来有边框的原因是 box-shadow 的“spread”属性，我将在下面解释。

box-shadow: <horizontal length of shadow> <verticle length of shadow> <amount of blur in shadow> <the spread radius of the shadow (How far should the shadow be cast)> rgba(<RGBA color code>);

看看这个工具：https ://www.cssmatic.com/box-shadow 这是一个简单的小页面，可以让你使用滑块实时修改一个box-shadow，我觉得这会帮助你获得更好的了解每个值如何与一个和另一个交互。

于 2019-04-24T16:46:52.363 回答