多个框边框CSS

问题描述 投票:-4回答:2

你能向我解释一下,这是我无法理解的盒子阴影属性的代码。我试图弄清楚到底是什么,但我可以。非常感谢你!

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>
css box-shadow
2个回答
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这是一个简单的小页面,允许你使用滑块实时修改盒子阴影,我觉得这将有助于你更好地了解每个值如何与一个和其他。


0
投票

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

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

单个值对中的第一个值将从左到右移动阴影,右侧将保持相同。第二个值仅根据值向上/向下移动阴影(+向上形成向下和向下自上而下的-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>
© www.soinside.com 2019 - 2024. All rights reserved.