Question

我的div有一个盒子阴影。我想删除它的右侧，但不想添加任何新代码，但是可以修改现有的box-shadow属性。我使用了剪切路径，但我也希望它也可以在IE上运行。请提出建议。

.test1 {
  box-shadow: 0 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="test1">MY AWESOME CONTENT</div>

请咨询。

Answer 1

只需将阴影向左移动，直到它位于元素的后面即可。

.test1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="test1">MY AWESOME CONTENT</div>

Answer 2

.test1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

据我所知，这似乎可以解决问题。后两个框阴影似乎什么也没做。如果您只是在寻找边界，有更好的方法来做。

Answer 3

使用额外的白色阴影将您不需要的阴影隐藏起来

.test1 {
  box-shadow: 
   1px 0 1px #fff,
   0 0 0 1px rgba(138, 155, 168, 0.6), 
   0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="test1">MY AWESOME CONTENT</div>

删除盒子阴影的右侧-CSS

3 个答案: