我需要在某个block元素上创建一个盒子阴影，但仅在其右侧（例如）。我做的方式是包装内部元件box-shadow到外层一个padding-right和overflow:hidden;这样的阴影其他三面是不可见的。
有没有更好的方法来实现这一目标？喜欢box-shadow-right吗？
编辑：我的意图是仅创建阴影的垂直部分。repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y。
如何在元素的一侧添加盒子阴影？
我要做的是为阴影创建一个垂直块，并将其放置在应放置块元素的旁边。然后将这两个块包装到另一个块中：
<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示例在这里。
这可能是一个简单的方法
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
将此分配给任何div
div {
border: 1px solid #666;
width: 50px;
height: 50px;
-webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
这个站点对我有帮助：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>
这是我的示例：
.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>这是我做的一个小技巧。
<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;`
只需使用:: 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>要获得最多两个侧面的修剪效果，可以使用带有背景渐变的伪元素。
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));
}
将在通常构成文档的元素的左侧和右侧添加类似阴影的效果。
是的，您可以使用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是阴影散布，您可以使用它来更改阴影的散布，使阴影看起来仅在一侧。
这也使用阴影定位规则10px将其发送到右侧（水平偏移），并将0像素保持在元素下方（垂直偏移）。
5px 是模糊半径:)
好的，这里再试一次。使用伪元素，并在它们上面使用阴影框属性。
的HTML：
ass
https://codepen.io/alex3o0/pen/PrMyNQ