负扩散和掩蔽阴影

CSS box-shadow使用4个参数:h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

模糊参数增加了渐变效果，但也增加了顶部和底部边界的阴影。为了消除这种副作用，我们可以使用:

负扩散减少了所有边界上的阴影:你可以尝试去除小的垂直阴影，而不影响侧面的阴影(对于小阴影更容易，5到10px)。 掩蔽与背景相同颜色的阴影(在本例中为白色)，这允许出现标记阴影。注意，这个掩蔽阴影需要有blur = 0来完全覆盖副作用。

这里有两个例子，第二个使用掩蔽阴影:

div { 宽度:100 px; 身高:100 px; 边框:1px纯绿色; 保证金:10 px; 浮:左; ｝ 例二号{ 盒子阴影:-10px 0 8px -8px黑色，10px 0 8px -8px黑色; ｝ # example2 { 不必: 0 -6px白色， 0 6px白色， -7px 0 4px -3px黑色 7px 0 4px -3px黑色; ｝ < div id = "例二" > < / div > < div id = " example2 " > < / div >

如果这些方法都不能满足您的需求，您还可以在任何现有div的旁边添加一个绝对div。

只需要记住将容器div设置为position: relative，这样绝对div就会留在里面。

#青年们{ 位置:相对; 宽度:100 px; 身高:100 px; 保证金:10 px; 边框:1px纯绿色; ｝ .shadow { 位置:绝对的; 高度:100%; 宽度:4 px; 左:0 px; 上图:0 px; Box-shadow: -4px 0 3px黑色; ｝ < div id = "青年们" > 内容在这里 < div class = "影子" > < / div > < / div >

你必须使用多个盒子阴影;． Inset属性使它看起来很漂亮，在里面:

div { 框影:插入0 12px 15px -4px rgba(31, 73, 125, 0.8)，插入0 -12px 8px -4px rgba(31, 73, 125, 0.8); 宽度:100 px; 身高:100 px; 保证金:50 px; 背景:白色; ｝ < div > < / div >

这适用于所有浏览器:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

我试图复制引导shadow-sm只是在右边，这是我的代码:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}

试试这个，对我很管用:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

如果你想在你的div上面有一个箭头，使用这个:

box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);