使用css3实现翘边阴影

要点讲解:

阴影一要点:

1、用一个圆角的层,设置阴影,z-index层级低于父级即可;但是其相对定位的属性需要另外设置在另一个class上如下图设置在effect上而不设置在wrap上

2、圆角的层可用after和before来实现,如果after和before2个伪类都设置阴影并重叠起来 ,阴影效果更好。

翘边阴影要点:

1、同上用after和before伪类,设置class属性transform: skew(12deg) rotate(4deg) 弄成2个菱形 ;层级低于本身作为阴影

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |