网站建设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>
上一个:数据分析思维你get了吗?
下一个:seo实战视频教程:怎么正确的学好SEO技能
确山网站建设,确山做网站,确山网站设计