我如何在元素的一边添加一个阴影框？
我需要在某个block元素上创build一个盒子阴影，但只在右侧（例如）。 我这样做的方式是将内部元素与box-shadow包装到外部padding-right和overflow:hidden; 所以影子的另外三面是不可见的。
有没有更好的方法来实现这一目标？ 像box-shadow-right ？
编辑 ：我的意图是只创build阴影的垂直部分。 与规则background:url(shadow.png) 100% 0% repeat-y repeat-y完全相同background:url(shadow.png) 100% 0% repeat-y会这样做。
是的，您可以使用box-shadow规则的shadow spread属性：
.myDiv { border: 1px solid #333; width: 100px; height: 100px; -webkit-box-shadow: 10px 0 5px -2px #888; box-shadow: 10px 0 5px -2px #888; }
<div class="myDiv"></div>
我自制的解决scheme很容易编辑：
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; }
为了在两边获得剪切效果，可以使用具有背景渐变的伪元素。
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)); }
会为通常构成文档的元素的左侧和右侧添加一个很好的阴影效果。
这是我做的一点小事。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> <div class="one_side_shadow"></div>
1.在要创build单面阴影的元素正下方创build一个<div class="one_side_shadow"></div> （在这种情况下，我希望id="element"的单面embedded阴影从底部）
然后，我用负的垂直偏移量创build了一个常规的box-shadow ，将阴影向上推到一边。
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
这可能是一个简单的方法
border-right : 1px solid #ddd; height:85px; box-shadow : 10px 0px 5px 1px #eaeaea;
将其分配给任何div
只需使用::之后或之前的伪元素添加阴影。 使其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>
这是我的例子：
.box{ width: 400px; height: 130px; 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>
这个网站帮助了我： https ： //gist.github.com/ocean90/1268328 （请注意，在该网站上，左侧和右侧的截止date是这个职位，但他们按预期工作）。 它们在下面的代码中得到纠正。
<!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>
div { border: 1px solid #666; width: 50px; height: 50px; -webkit-box-shadow: inset 10px 0px 5px -1px #888 ; }
我所做的是为阴影创build一个垂直块，并将其放置在我的块元素应该在的位置旁边。 这两个块然后被包裹到另一个块中：
<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 这里的例子。
