如何去除边框阴影提供的效果？

Question

我有一个“浮动卡片”，周围有一个盒子阴影。我想在一侧放置一个有颜色的边框。但是，盒子阴影会产生额外的白色边框。我想要去掉这个白色边框，但我不知道怎么做。我想保留盒子阴影。我尝试了几种方法，包括这个问题的答案。 CSS Box-Shadow adds arbitrary white border to Div 为了具体展示我想要去除的内容：
蓝色左侧的小白色边框。

这里是JSFiddle和代码：

https://jsfiddle.net/pg5omtqq/

.floating-card {
  background-color: white;
  border-left: 5px solid blue;
  box-shadow: 0px 0px 10px grey;
  margin: 1.0em;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
}

<div class="floating-card">
  <h3 class="tile_title">Title</h3>
</div>

编辑：明确一下，我想保留阴影效果，但是要去掉小白边。

- Mitta

---

你还需要盒子阴影效果吗？你想要从左侧（蓝色端）移除它吗？还是你想要移除整个盒子阴影效果？ - Veena K. Suresh

不，我想保留box-shadow。我会编辑我的问题。 - Mitta

我看不到它，放大你的图像，你的jsfiddle页面https://jsfiddle.net/pg5omtqq/1/在特定的浏览器中显示吗？ - G-Cyrillus

Answer 1

这将移除左侧的阴影。

 -webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);

你可以使用这个生成器来调整盒子阴影，具体操作请参考以下链接：https://www.cssmatic.com/box-shadow。

- Yinkci Heart

---

小小的侧记，它并没有完全消除左边的白色边框。这个答案只是缺少了左边的盒子阴影。在左边给它一个5像素的小盒子阴影，会显示一个极难看到的白色边框。 - Mitta

Answer 2

添加到你的CSS中。

box-shadow: none;

- maevanapcontact

Answer 3

-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;

- Veena K. Suresh

Answer 4

使用以下 CSS 去除左侧的 box-shadow。

.floating-card{
  background-color: white;
  border-left: 5px solid blue;
  -webkit-box-shadow: 0px 0px 10px 0px grey;
    -moz-box-shadow: 0px 0px 10px 0px grey;
    box-shadow: 0px 0px 10px 0px grey;
  margin: 1.0em;
 padding-top: 5px;
 padding-bottom: 10px;
 padding-left: 25px;
 padding-right: 25px;
}

<div class="floating-card">
    <h3 class="tile_title">Title</h3>
</div>

- Shital Marakana