删除框阴影的右侧 [英] Remove right side of box shadow

问题描述

我发现了很多与我所要求的内容相似的帖子，并且已经花了几个小时努力工作，最终决定我可能应该寻求一些外部建议:).

I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).

我正在尝试使用box-shadow阴影div的3面.我希望右侧无阴影，但是无法弄清楚有很多关于如何使顶部阴影的文章，但是经过无数次的努力，我无法甚至应用这个.

I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.

推荐答案

我认为您有2种选择:

1)将阴影的水平对齐设置为左侧(负值).

1) Set your shadow's horizontal alignment to the left (negative values).

box-shadow: -30px 0px 10px 10px #888888;

尽管这样，您顶部和底部的阴影大小不会相同.

Although this way you won't have the same shadow size in the top and bottom.

2)在div内使用div并将阴影应用于每个div.

2) Use a div inside a div and apply shadow to each one.

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

然后，您必须调整想要的尺寸.

Then you'll have to ajust the size for the one you want.

在这里，有一个jsfiddle: http://jsfiddle.net/EwgKF/19/

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/

这篇关于删除框阴影的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！