脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

  发布时间：2016-06-08 10:21:11   作者：佚名   我要评论
下面小编就为大家带来一篇CSS实现曲面阴影效果的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

如图所示：

photo01 (2)

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

第一部分：HTML

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

XML/HTML Code复制内容到剪贴板
  1. <div class="con yy">  
  2.      <h1>曲线阴影</h1>  
  3. </div>  
  4. <ul class="box">  
  5.      <li><img src="img/1.jpg"></li>  
  6.      <li><img src="img/2.jpg"></li>  
  7.      <li><img src="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: 50px auto;   
  6.     background:#FFFFFF;   
  7.     line-height: 200px;   
  8.     text-align: center;   
  9.     font-size: 24px;   
  10. }   
  11. .yy{   
  12.     position: relative;   
  13.     box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;   
  14.     -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;   
  15.     -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;   
  16.     -o-box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(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: 0 0 20px rgba(0,0,0,0.3);   
  30.    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);   
  31.    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);   
  32.    -o-box-shadow: 0 0 20px rgba(0,0,0,0.3);   
  33. }  

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

CSS Code复制内容到剪贴板
  1. .box{    
  2.     width: 980px;   
  3.     height: 300px;   
  4.     margin: 0 auto;    
  5. }   
  6. .box li img{   
  7.     display: block;   
  8.     width: 290px;   
  9.     height: 200px;   
  10. }   
  11. .box li{   
  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: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;   
  20.     -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;   
  21.     -webkit-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;   
  22.     -o-box-shadow: 0 0px 4px rgba(0,0,0,0.3) , 0 0 60px rgba(0,0,0,0.1) inset;    
  23. }   
  24. .box li: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: 0 8px 20px rgba(0,0,0,0.6);   
  34.     -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   
  35.     -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   
  36.     -o-box-shadow: 0 8px 20px rgba(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. .box li: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: 0 8px 20px rgba(0,0,0,0.6);   
  52.     -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   
  53.     -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);   
  54.     -o-box-shadow: 0 8px 20px rgba(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

相关文章

  • CSS3实现曲线阴影和翘边阴影

    这篇文章主要为大家详细介绍了CSS3实现曲线阴影和翘边阴影的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-03

  • CSS3实现千变万化的文字阴影text-shadow效果设计

    这篇文章主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料，感兴趣的小伙伴们可以参考一下
    2016-04-26

  • CSS3中文字镂空、透明值、阴影效果设置示例小结

    这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下
    2016-03-07

  • CSS3 text-shadow实现文字阴影效果

    这篇文章主要介绍了CSS3 text-shadow实现文字阴影效果的方法，丰富文字排版布局美化效果，感兴趣的小伙伴们可以参考一下
    2016-02-24

  • CSS3 text shadow字体阴影效果

    最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。
    2016-01-08

最新评论

关注微信公众号

扫一扫