只投影底部css3-Java 学习之路

202

有没有办法只在底部放下阴影？我有一个菜单，旁边有两张图片 . 我不想要一个正确的阴影，因为它与正确的图像重叠 . 我不喜欢使用图像，所以有没有办法将它放在底部，如：

box-shadow-bottom: 10px #FFF; 或类似？

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

11 回答

215

更新4

与更新3相同，但使用现代css（=较少的规则），因此不需要对伪元素进行特殊定位 .

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

更新3

我以前的所有答案都使用额外的标记来创建这种效果，这不一定是必需的 . 我认为这是一个更清洁的解决方案......唯一的诀窍就是利用这些值来获得阴影的正确定位以及阴影的正确强度/不透明度 . 这是一个新的小提琴，使用pseudo-elements：

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

更新2

显然，您可以使用box-shadow CSS的额外参数来执行此操作，正如其他人刚刚指出的那样 . 这是演示：

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

这将是一个更好的解决方案 . 添加的额外参数描述为：

第四长度是展开距离 . 正值会使阴影形状在指定半径的所有方向上扩展 . 负值会导致阴影形状收缩 .

更新

看看jsFiddle上的演示：http://jsfiddle.net/K88H9/4/

我所做的是创建一个“阴影元素”，隐藏在你想要有阴影的实际元素后面 . 我使“阴影元素”的宽度与实际元素的宽度相差不超过指定阴影的2倍;然后我正确对齐它 .

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

原始答案

是的，您可以使用您提供的相同语法执行此操作 . 第一个值控制水平定位，第二个值控制垂直定位 . 所以只需将第一个值设置为 0px ，将第二个值设置为您想要的任何偏移量，如下所示：

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

有关框阴影的更多信息，请查看以下内容：

我希望这有帮助 .

回复于 2024-05-05T04:39:20+08:00

20
只需使用spread参数使阴影变小：
```
.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
```
```
<div class="shadow">Some content</div>
```
现场演示：http://dabblet.com/gist/a8f8ba527f5cff607327

为了看不到侧面的任何阴影，扩散半径（第4个参数）的（绝对值）需要与模糊半径（第3个参数）相同 .
回复于 2024-05-05T04:39:20+08:00
5
如果背景上有固定的颜色，则可以隐藏侧面阴影效果，其中两个 masking shadows 具有相同的背景颜色，模糊= 0，例如：
```
box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/
```
请注意，黑色阴影必须是最后一个，并且具有负展开（-3px），以防止它超出角落 .

这里是fiddle（更改遮罩阴影的颜色以查看它是如何工作的） .
回复于 2024-05-05T04:39:20+08:00
0
阅读the specs总是更好 . 没有 box-shadow-bottom 属性，正如Lea指出的那样，你应该始终将未加前缀的属性放在底部，在前缀之后 .

所以这是：
```
.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
```
```
<div class="shadow">Some content</div>
```
回复于 2024-05-05T04:39:20+08:00

我想这就是你要追求的？

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

回复于 2024-05-05T04:39:20+08:00

0

如何使用一个包含div的溢出设置为隐藏和底部的填充？这似乎是最简单的解决方案 .

很抱歉，我自己并没有想到这一点，但看到了somewhere else .

使用一个元素来包装元素获取box-shadow和溢出：隐藏在包装器上，你可以使额外的box-shadow消失，并且仍然有一个可用的边框 . 由于传播，这也解决了元素看起来较小的问题 . 像这样：#wrapper {padding-bottom：10px;溢出：隐藏; }
#elem {box-shadow：0 0 10px black; }
内容在这里仍然是一个聪明的解决方案，当它必须在纯CSS中完成！

正如Jorgen Evens所说 .

回复于 2024-05-05T04:39:20+08:00
1
我还需要一个阴影，但只在图像下面，并稍微向左和向右设置 . 这对我有用：
```
.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}
```
应用的元素是页面范围的图像（980px x 300px） .

如果在摆弄设置时有帮助，它们运行如下：

水平阴影，垂直阴影，模糊距离，传播（即阴影大小）和颜色 .
回复于 2024-05-05T04:39:20+08:00
61
如果您的背景是实心的（或者您可以使用CSS重现它），您可以使用线性渐变：
```
div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
```
```
<div>
<p>Foobar</p>
<p>test</p>
</div>
```
这将在元素的底部生成5px渐变，从不透明度为30％的黑色到完全透明 . 元素的其余部分具有白色背景 . 当然，更改线性渐变的最后2个色标，可以使背景完全透明 .
回复于 2024-05-05T04:39:20+08:00

最好查看阴影：

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

此代码当前正在stackoverflow web上使用 .

回复于 2024-05-05T04:39:20+08:00

-3

在别人身上更新他的回答透明的边而不是白色，所以它也适用于其他颜色的背景 .

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

回复于 2024-05-05T04:39:20+08:00

-1

内心的阴影

.shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>

回复于 2024-05-05T04:39:20+08:00

只投影底部css3

11 回答

更新4

更新3

更新2

更新

原始答案

相关问题