网站建设CSS技巧之png图片阴影效果没有边框

厦门网站建设跟你探讨一下你在建设网站的时候给png图片加css阴影效果是否会出现png图片被强行加了边框。

厦门网站建设

这里交你一招不会有边框的效果

CSS代码如下

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mr-2 {
  margin-right: 2em;
}

.mb-1 {
  margin-bottom: 1em;
}

.text-center {
  text-align: center;
}

.box-shadow {
  box-shadow: 2px 4px 8px #585858;
}

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #585858);
}

html代码如下

<div class="wrapper">
  <div class="mr-2">
    <div class="mb-1 text-center">
      box-shadow
    </div>
    
    <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow">
  </div>
    
  <div>
    <div class="mb-1 text-center">
      drop-shadow
    </div>
    
    <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow">
  </div>
</div>