CODEWITHSUNDEEP
cssinternet-explorer-11dropshadow
Bst_coder
Bst_coder

Reputation: 131

CSS - drop-shadow issue

I'm working with the drop-shadow property. It is working fine in browsers except internet explorer. Its important this works in internet explorer 11 for me. What can I do? Thanks in advance.

.nb-view-project-image {
  max-width: 315px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ff4040;
  filter: drop-shadow(5px 5px 5px #222);
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  -ms-filte: drop-shadow(5px 5px 5px #222);
}
<div class="nb-view-project-image"></div>

Upvotes: 0

Views: 153

Answers (3)

Zhi Lv
Zhi Lv

Reputation: 21383

You could also try to use the following code:

.nb-view-project-image {
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    margin: 20px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}

Upvotes: 0

user3710372
user3710372

Reputation: 40

Try using:

-moz-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;

Or: 

-webkit-box-shadow: #222 5px 5px 5px;
box-shadow: 5px 5px 5px #222;

Upvotes: 0

Szymon Żakiewicz
Szymon Żakiewicz

Reputation: 91

Try this css:

.nb-view-project-image {
  max-width: 315px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ff4040;
  box-shadow: 5px 5px 5px #222;  
}

Upvotes: 1

Related Questions