我需要在CSS3中的border-bottom上应用border shadow。 我只想在下边缘应用CSS3阴影。 这种可能吗?
我需要在CSS3中的border-bottom上应用border shadow。 我只想在下边缘应用CSS3阴影。 这种可能吗?
问题是阴影从包含div的侧面溢出。为了避免这种情况,模糊值必须等于扩散值的绝对值。
div {
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
}
<div>wefwefwef</div>
这里深入探讨了底部阴影的CSS3实现
。尝试:
div{
-webkit-box-shadow:0px 1px 1px #de1dde;
-moz-box-shadow:0px 1px 1px #de1dde;
box-shadow:0px 1px 1px #de1dde;
}
<div>wefwefwef</div>
一般会在盒子底部距离1像素处添加1像素的模糊阴影。
box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
使用 box-shadow
时不带水平偏移量。
http://www.css3.info/preview/box-shadow/
例如:
div {
-webkit-box-shadow: 0 10px 5px #888888;
-moz-box-shadow: 0 10px 5px #888888;
box-shadow: 0 10px 5px #888888;
}
<div>wefwefwef</div>
在侧边将有轻微的阴影,并且模糊半径较大(上述示例中为5px)
我有些晚了,但实际上可以使用box-shadow
来模拟边框。
.border {
background-color: #ededed;
padding: 10px;
margin-bottom: 5px;
}
.border-top {
box-shadow: inset 0 3px 0 0 cornflowerblue;
}
.border-right {
box-shadow: inset -3px 0 0 cornflowerblue;
}
.border-bottom {
box-shadow: inset 0 -3px 0 0 cornflowerblue;
}
.border-left {
box-shadow: inset 3px 0 0 cornflowerblue;
}
<div class="border border-top">border-top</div>
<div class="border border-right">border-right</div>
<div class="border border-bottom">border-bottom</div>
<div class="border border-left">border-left</div>
编辑:我对这个问题的理解有误,但我会保留答案,因为可能还有其他人会误解问题并来寻找我提供的答案。
一种新的解决方法
在以前的答案中,问题似乎总是关于如何让盒子边框要么显示在对象的左右两侧,要么你必须将其嵌入到无法正确阴影整个容器长度的地方。
这个例子使用了 :after
伪元素和一个带有透明度的线性渐变来在容器上加上投影,该容器恰好延伸到您想要投影的元素的两侧。
需要注意的是,如果您在要投影的元素上使用了填充,它将无法正确显示。 这是因为 after
伪元素直接在元素内部内容之后添加其内容。 因此,如果您有填充,则阴影将出现在盒子内部。 可以通过消除外部容器(应用阴影的地方)上的填充并使用内部容器来应用所需的填充来克服这个问题。
具有填充和阴影div的背景颜色的示例:
如果您想要更改阴影的深度,请简单地增加 after
伪元素中的 height
样式。 您还可以在线性渐变样式中显然加深、减淡或更改颜色。
body {
background: #eee;
}
.bottom-shadow {
width: 80%;
margin: 0 auto;
}
.bottom-shadow:after {
content: "";
display: block;
height: 8px;
background: transparent;
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.bottom-shadow div {
padding: 18px;
background: #fff;
}
<div class="bottom-shadow">
<div>
Shadows, FTW!
</div>
</div>
box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);
<h3>您的文本</h3><div class="border-shadow"></div>
和CSS:
.shadow {
width:100%;
height:1px; // = "border height (without the shadow)!"
background:#000; // = "border color!"
-webkit-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
-moz-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
}
在这里,您可以轻松地尝试半径等:https://www.cssmatic.com/box-shadow