Question

您能再给我解释一下吗，这是代码我不了解框阴影属性。我试图弄清楚到底是怎么回事，但我可以。非常感谢你！

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>

Answer 1

而不是这样写：

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 这是一个简单的小页面，可让您使用滑块实时修改框阴影，我认为这将帮助您更好地了解每个值如何相互影响。

Answer 2

顾名思义，这就是一切。框阴影属性可将阴影添加到所需的任何元素。

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

单个值对中的第一个值将使阴影从左向右移动，并且右侧将保持不变。第二个值仅根据值（+ form向下和-ve值从下向上）向上/向下移动阴影。第3个值为阴影增加了平滑度（该值越大，平滑度将增加阴影），第4个是颜色。

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

多个框边框CSS

2 个答案: