CSS 翘边阴影的实现代码

空调座椅

本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：

仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。

实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现。

HTML代码

1. <ul class="box">
2. <li><img src="......" alt=""></li>
3. <li><img src="......" alt=""></li>
4. <li><img src="......" alt=""></li>
5. </ul>

复制代码

CSS代码

1. ul,li {
2. list-style:none;
3. }
4. .box {
5. width: 980px;
6. height: auto;
7. clear: both;
8. overflow: hidden;
9. margin: 20px auto;
10. }
11. .box li {
12. width: 300px;
13. height: 210px;
14. position: relative;
15. background: #fff;
16. float: left;
17. margin: 20px 10px;
18. border: 2px solid #efefef;
19. box-shadow: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
20. }
21. .box li img {
22. display: block;
23. width: 290px;
24. height: 200px;
25. margin: 5px;
26. }
27. .box li:before, .box li:after {
28. content: '';
29. position: absolute;
30. z-index: -2;
31. width: 80%;
32. height: 80%;
33. bottom: 8px;
34. background: transparent;
35. box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
36. }
37. .box li:before {
38. left: 7%;
39. transform: skewX(-12deg) rotate(-4deg);
40. }
41. .box li:after {
42. right: 7%;
43. transform: skewX(12deg) rotate(4deg);
44. }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

袁8642

谢谢分享~~~~~

行者无疆952

顶顶更健康！！！