CSS如何实现曲面阴影效果的简单实例(推荐)

爬山和爱情一样,爬得越高摔得越惨,同样,爱得越深,受伤的几率越大。人的一生全靠奋斗,唯有奋斗才能成功。让我们一起来奋斗吧!相信自己,我们会谱出一段美妙的音符,来唱出我们心中的那首歌!

不知道大家在做项目的时候遇见很绚丽的设计图后会怎么做。有一些设计图会经常使用阴影效果看上去更加立体,一般情况下像我这种懒人直接就切图了。压根就没有想着去研究一下代码怎么实现。

后来我们的设计稿总是改啊改啊,***简直是烦死我了,他要是改了图我就要正版的切图更换。所以我决定研究一下这个东西,其实我们是可以实现的哦!

如图所示:

上面的效果就是平时写项目最典型的效果了,做设计的小伙伴肯定知道PS分分钟搞定,但是代码实现起来我们也可以么?———告诉他们:必须可以!哈哈o(∩_∩)o;说了大话那就下点功夫研究一下吧!

第一部分:HTML

页面部分的内容很简单接下来让我们看看CSS的部分吧。

XML/HTML Code复制内容到剪贴板
  1. <divclass="conyy">
  2. <h1>曲线阴影</h1>
  3. </div>
  4. <ulclass="box">
  5. <li><imgsrc="img/1.jpg"></li>
  6. <li><imgsrc="img/2.jpg"></li>
  7. <li><imgsrc="img/3.jpg"></li>
  8. </ul>

第二部分:CSS3

在我们看到上面这个图片的时候大家肯定第一印象是CSS3的 box-shadow ,但是如果仅仅是这样子我们可以实现么?很明确不可以。

无论是曲面的也好还是翘边的也罢,box-shadow自己是无法实现的,我们需要配合CSS3的伪类元素来实现。

来一起看看代码吧!

曲面阴影我们就如下代码就可以实现了,不熟悉伪类元素的小伙伴可以自行查阅文档看看。

CSS Code复制内容到剪贴板
  1. *{padding:0;margin:0;list-style:none;}
  2. .con{
  3. width:70%;
  4. height:200px;
  5. margin:50pxauto;
  6. background:#FFFFFF;
  7. line-height:200px;
  8. text-align:center;
  9. font-size:24px;
  10. }
  11. .yy{
  12. position:relative;
  13. box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  14. -webkit-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  15. -moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  16. -o-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0.1)inset;
  17. }
  18. .yy:after,.yy:before{
  19. position:absolute;
  20. content:'';
  21. top:50%;
  22. bottombottom:-1px;
  23. left:10px;
  24. rightright:10px;
  25. background:#fff;
  26. z-index:-1;
  27. /*圆角水平为100px垂直为10px必须用‘/’分开,不可以为空格*/
  28. border-radius:100px/10px;
  29. box-shadow:0020pxrgba(0,0,0,0.3);
  30. -webkit-box-shadow:0020pxrgba(0,0,0,0.3);
  31. -moz-box-shadow:0020pxrgba(0,0,0,0.3);
  32. -o-box-shadow:0020pxrgba(0,0,0,0.3);
  33. }

下面的代码就是怎么去实现翘边阴影的效果:

CSS Code复制内容到剪贴板
  1. .box{
  2. width:980px;
  3. height:300px;
  4. margin:0auto;
  5. }
  6. .boxliimg{
  7. display:block;
  8. width:290px;
  9. height:200px;
  10. }
  11. .boxli{
  12. position:relative;
  13. float:left;
  14. width:290px;
  15. height:200px;
  16. background:#FFFFFF;
  17. padding:5px;
  18. margin-right:25px;
  19. box-shadow:00px4pxrgba(0,0,0,0.3),0060pxrgba(0,0,0,0.1)inset;
  20. -moz-box-shadow:00px4pxrgba(0,0,0,0.3),0060pxrgba(0,0,0,0.1)inset;
  21. -webkit-box-shadow:00px4pxrgba(0,0,0,0.3),0060pxrgba(0,0,0,0.1)inset;
  22. -o-box-shadow:00px4pxrgba(0,0,0,0.3),0060pxrgba(0,0,0,0.1)inset;
  23. }
  24. .boxli:before{
  25. position:absolute;
  26. content:'';
  27. width:90%;
  28. height:80%;
  29. left:18px;
  30. bottombottom:11px;
  31. z-index:-2;
  32. background:transparent;
  33. box-shadow:08px20pxrgba(0,0,0,0.6);
  34. -moz-box-shadow:08px20pxrgba(0,0,0,0.6);
  35. -webkit-box-shadow:08px20pxrgba(0,0,0,0.6);
  36. -o-box-shadow:08px20pxrgba(0,0,0,0.6);
  37. transform:skew(-12deg)rotate(-5deg);
  38. -moz-transform:skew(-12deg)rotate(-5deg);
  39. -webkit-transform:skew(-12deg)rotate(-5deg);
  40. -o-transform:skew(-12deg)rotate(-5deg);
  41. }
  42. .boxli:after{
  43. position:absolute;
  44. content:'';
  45. width:90%;
  46. height:80%;
  47. rightright:18px;
  48. bottombottom:11px;
  49. z-index:-2;
  50. background:transparent;
  51. box-shadow:08px20pxrgba(0,0,0,0.6);
  52. -moz-box-shadow:08px20pxrgba(0,0,0,0.6);
  53. -webkit-box-shadow:08px20pxrgba(0,0,0,0.6);
  54. -o-box-shadow:08px20pxrgba(0,0,0,0.6);
  55. transform:skew(12deg)rotate(5deg);
  56. -moz-transform:skew(12deg)rotate(5deg);
  57. -webkit-transform:skew(12deg)rotate(5deg);
  58. -o-transform:skew(12deg)rotate(5deg);
  59. }

这样子的效果都是很巧妙的利用了CSS3的伪类元素来实现的,在视觉体验上为产品可是大大的加分哦!有兴趣的小伙伴也来试试吧。

以上这篇CSS实现曲面阴影效果的简单实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

原文地址:http://www.cnblogs.com/youyuekeji/p/5567386.html

标签: CSS