CSS 如何在元素的一侧添加框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5115427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a box-shadow on one side of an element?
提问by tillda
I need to create a box-shadow on some blockelement, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadowinto an outer one with padding-rightand overflow:hidden;so the three other sides of the shadow are not visible.
我需要在某些block元素上创建一个框阴影，但仅（例如）在其右侧。我这样做的方法是将内部元素与box-shadow外部元素包裹起来padding-right，overflow:hidden;因此阴影的其他三个侧面不可见。
Is there some better way to achieve this? Like box-shadow-right?
有没有更好的方法来实现这一目标？喜欢box-shadow-right？
EDIT: My intentions are to create onlythe vertical part of the shadow. Exactly the same as what repeat-yof the rule background:url(shadow.png) 100% 0% repeat-ywould do.
编辑：我的意图是只创建阴影的垂直部分。repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y。
回答by Kyle
Yes, you can use the shadow spread property of the box-shadow rule:
是的，您可以使用 box-shadow 规则的 shadow spread 属性：
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
box-shadow: 10px 0 5px -2px #888;
}<div class="myDiv"></div>The fourth property there -2pxis the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.
第四个属性-2px是阴影扩散，你可以用它来改变阴影的扩散，使阴影看起来只在一侧。
This also uses the shadow positioning rules 10pxsends it to the right (horizontal offset) and 0pxkeeps it under the element (vertical offset.)
这也使用阴影定位规则10px将其发送到右侧（水平偏移）并将其0px保持在元素下方（垂直偏移）。
5pxis the blur radius :)
5px是模糊半径:)
回答by Puyol
My self-made solution which is easy to edit:
我自制的易于编辑的解决方案：
HTML:
HTML：
<div id="anti-shadow-div">
<div id="shadow-div"></div>
</div>?
css:
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;
}?
回答by Jacek Kuzemczak
To get the clipped effect on up to two sides you can use pseudo elements with background gradients.
要获得最多两侧的剪裁效果，您可以使用具有背景渐变的伪元素。
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));
}
will add a nice shadow-like effect to the left and right of the elements that normally make up a document.
将在通常构成文档的元素的左侧和右侧添加一个漂亮的类似阴影的效果。
回答by riegersn
Just use ::after or ::before pseudo element to add the shadow. Make it 1px and position it on whatever side you want. Below is example of top.
只需使用 ::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>回答by Webpixstudio
Here is my example:
这是我的例子：
.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>回答by Webpixstudio
Here's a little hack that I did.
这是我做的一个小技巧。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
1.Create a <div class="one_side_shadow"></div>right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for id="element"coming from the bottom)
1.<div class="one_side_shadow"></div>在我想要创建单侧框阴影的元素下方创建一个右侧（在这种情况下，我想要一个id="element"来自底部的单侧插入阴影）
2.Then I created a regular box-shadowusing a negative vertical offset to push the shadow upwards to one-side.
2.然后我创建了一个规则，box-shadow使用负的垂直偏移将阴影向上推到一侧。
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
回答by madhairsilence
This could be a simple way
这可能是一个简单的方法
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
Assign this to any div
将此分配给任何 div
回答by ROOT
Here is a codepento demonstrate for each side, or a working snippet:
这是一个用于演示每一方的代码笔，或一个工作片段：
.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>回答by alex
Ok, here is one try more. Using pseudo elements and aplying the shadow-box porperty over them.
好的，这里再试一次。使用伪元素并在它们上应用阴影框属性。
html:
html：
<div class="no-relevant-box">
<div class="div-to-shadow-1"></div>
<div class="div-to-shadow-2"></div>
</div>
sass:
萨斯：
.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
回答by ter24
This site helped me: https://gist.github.com/ocean90/1268328(Note that on that site the left and right are reversed as of the date of this post... but they work as expected). They are corrected in the code below.
这个站点帮助了我：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>
