如何删除边框阴影提供的？

Question

So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.

CSS Box-Shadow adds arbitrary white border to Div

To show specifically what I want removed:

The little small white border on the left of the blue.

Here is a JSFiddle and the code:

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> 

EDIT : To be clear, I want to keep the box-shadow. But have the small white border removed.

Answer 1

添加到您的CSS

box-shadow: none;

Answer 2

This will remove the shadow on the left

 -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);

You can adjust this by using this generator box shadow. source: https://www.cssmatic.com/box-shadow

Answer 3

remove left box-shadow by using below css.

 .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> 

Answer 4

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