我需要在某些block元素上创建一个盒子阴影，但仅（例如）在其右侧。我这样做的方法是将内部元素包裹box-shadow到外部元素中padding-right，overflow:hidden;因此阴影的其他三个侧面不可见。
有没有更好的方法来实现这一目标？喜欢box-shadow-right？
编辑：我的意图是只创建阴影的垂直部分。repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y。
问问题
467984 次
13 回答
623
是的，您可以使用 box-shadow 规则的 shadow spread 属性：
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}<div class="myDiv"></div>第四个属性-2px是shadow spread，你可以用它来改变阴影的传播，使阴影看起来只在一侧。
这也使用阴影定位规则10px将其发送到右侧（水平偏移）并将0px其保持在元素下方（垂直偏移）。
5px是模糊半径:)
于 2011-02-25T09:18:52.430 回答
69
clip-path现在（2020 年）是在元素的特定侧面实现盒子阴影的最简单方法之一，特别是当所需的效果是特定边缘的“干净切割”阴影（我相信这是 OP 最初寻找的）时，比如这个：
.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}<div class="shadow-element"></div>...与像这样的衰减/减少/变薄阴影相反：
.shadow-element {
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}<div class="shadow-element"></div>只需将以下 CSS 应用于相关元素：
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
在哪里：
Apx设置顶部边缘的阴影可见性Bpx正确的Cpx底部Dpx剩下
为应隐藏阴影的任何边缘输入值 0，为应显示阴影的任何边缘输入负值（与 box-shadow 模糊半径 - 相同Xpx）。
于 2020-06-13T23:51:22.527 回答
37
我自制的易于编辑的解决方案：
HTML：
<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>
CSS：
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
height:100px;
width:100px;
background: red;
}
#anti-shadow-div{
margin:20px;
display:table;
overflow:hidden;
}
演示：http:
//jsfiddle.net/jDyQt/103
于 2012-06-21T07:46:55.630 回答
27
要在最多两侧获得剪裁效果，您可以使用带有背景渐变的伪元素。
header::before, main::before, footer::before, header::after, main::after, footer::after {
display: block;
content: '';
position: absolute;
width: 8px;
height: 100%;
top: 0px;
}
header::before, main::before, footer::before {
left: -8px;
background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
header::after, main::after, footer::after {
right: -8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
将在通常构成文档的元素的左侧和右侧添加漂亮的阴影效果。
于 2014-06-14T13:03:48.723 回答
16
只需使用 ::after 或 ::before 伪元素来添加阴影。将其设为 1px 并将其放置在您想要的任何一侧。以下是顶部的示例。
footer {
margin-top: 50px;
color: #fff;
background-color: #009eff;
text-align: center;
line-height: 90px;
position: relative;
}
footer::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
top: 0;
left: 0;
z-index: -1;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}<footer>top only box shadow</footer>于 2017-01-14T22:35:43.627 回答
6
这是我的例子：
.box{
width: 400px;
height: 80px;
background-color: #C9C;
text-align: center;
font: 20px normal Arial, Helvetica, sans-serif;
color: #fff;
padding: 100px 0 0 0;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}<div class="box">
</div>于 2013-08-02T18:45:04.473 回答
4
这是我做的一个小技巧。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
1.在要创建一侧框阴影的元素下方创建一个<div class="one_side_shadow"></div>右下方（在这种情况下，我想要一个id="element"来自底部的单侧嵌入阴影）
2.然后我创建了一个规则box-shadow，使用负垂直偏移将阴影向上推到一侧。
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
于 2012-06-08T12:08:22.887 回答
3
这是为每一面演示的代码笔，或工作片段：
.boxes {
display: flex;
flex-wrap: wrap;
}
.box {
margin: 20px;
border: 1px solid #ccc;
font-family: Helvetica Neue, Arial, sans-serif;
font-weight: 100;
letter-spacing: 2px;
color: #999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
padding: 40px;
line-height: 1.4em;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}<div class="boxes">
<div class="box top">Top Only</div>
<div class="box right">Right Only</div>
<div class="box bottom">Bottom Only</div>
<div class="box left">Left Only</div>
</div>于 2020-03-19T13:06:38.827 回答
2
这可能是一个简单的方法
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
将此分配给任何 div
于 2013-02-16T15:26:28.397 回答
1
该站点帮助了我：https ://gist.github.com/ocean90/1268328 （请注意，在该站点上，截至本文发布之日，左右颠倒了……但它们按预期工作）。它们在下面的代码中得到纠正。
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: 5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: -5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>
</body>
</html>
于 2013-11-22T01:44:32.923 回答
0
我所做的是为阴影创建一个垂直块，并将其放在我的块元素应该在的位置旁边。然后将这两个块包装到另一个块中：
<div id="wrapper">
<div id="shadow"></div>
<div id="content">CONTENT</div>
</div>
<style>
div#wrapper {
width:200px;
height:258px;
}
div#wrapper > div#shadow {
display:inline-block;
width:1px;
height:100%;
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}
div#wrapper > div#content {
display:inline-block;
height:100%;
vertical-align:top;
}
</style>
jsFiddle 示例在这里。
于 2014-10-10T09:09:36.177 回答
0
div {
border: 1px solid #666;
width: 50px;
height: 50px;
-webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
于 2014-01-10T05:45:19.967 回答
0
好的，这里再试一次。使用伪元素并在它们上应用阴影框属性。
html:
<div class="no-relevant-box">
<div class="div-to-shadow-1"></div>
<div class="div-to-shadow-2"></div>
</div>
萨斯：
.div-to-shadow-1, .div-to-shadow-2
height: 150px
width: 150px
overflow: hidden
transition: all 0.3s ease-in-out
&::after
display: block
content: ''
position: relative
top: 0
left: 100%
height: 100%
width: 10px
border: 1px solid mediumeagreen
box-shadow: 0px 7px 12px rgba(0,0,0,0.3)
&:hover
border: 1px solid dodgerblue
overflow: visible
于 2019-07-16T19:12:35.303 回答