box-shadow vs filter: drop-shadow

来源：互联网发布：汽车票制作生成器软件编辑：程序博客网时间：2024/06/06 04:26

利用CSS 伪元素：after给方框添加小箭头图标，并且比较box-shadow与filter: drop-shadow实现阴影效果的差异，html代码如下

<div class="box-shadow">box-shadow</div><div class="filter-drop-shadow">filter: drop-shadow</div>

CSS代码如下：

/** * box-shadow vs filter: drop-shadow */body {background: #ddd;font: 16px/1 sans-serif;}div {margin: 100px;width: 200px;background: #fff;padding: 20px;position: relative;}div:after {content: "";position: absolute;top: 50%;left: -10px;margin: -10px 0 0;border-right: 10px solid #fff;border-top: 10px solid transparent;border-bottom: 10px solid transparent;}.box-shadow {box-shadow: 0 1px 5px rgba(0,0,0,.5);}.filter-drop-shadow {-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));}

效果截图如下：

0 0