filter:drop-shadow实现尖角带阴影的提示面板效果实例页面
回到相关文章 »代码:
CSS代码:
.box { margin: 40px; padding: 50px; background-color: #fff; position: relative; font-size: 24px; } .cor { position: absolute; left: -40px; widtd: 0; height: 0; overflow: hidden; border: 20px solid transparent; border-right-color: #fff; } .box-shadow { box-shadow: 5px 5px 10px black; } .drop-shadow { filter: drop-shadow(5px 5px 10px black); }
HTML代码:
<div class="box box-shadow"> <i class="cor"></i> box-shadow </div> <div class="box drop-shadow"> <i class="cor"></i> filter: drop-shadow </div>
效果:
box-shadow
filter: drop-shadow