当前位置:Web前端 > > 正文

css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)

时间:2022-01-18 01:26:12类别:Web前端

css圆角阴影代码

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

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

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

如图所示:

css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)

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

第一部分:HTML

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

  • XML/HTML Code复制内容到剪贴板
    1. <li class="con yy">  
    2.      <h1>曲线阴影</h1>  
    3. </li>  
    4. <ul class="box">  
    5.      <li><img src="img/1.jpg" alt="css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)" border="0" />></li>  
    6.      <li><img src="img/2.jpg" alt="css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)" border="0" />></li>  
    7.      <li><img src="img/3.jpg" alt="css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)" border="0" />></li>  
    8. </ul>  
  • 第二部分:CSS3

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

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

    来一起看看代码吧!

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

  • CSS Code复制内容到剪贴板
    1. *{ padding: 0; margin: 0; list-stylenone;}   
    2. .con{    
    3.     width: 70%;    
    4.     height200px;   
    5.     margin50px auto;   
    6.     background:#FFFFFF;   
    7.     line-height200px;   
    8.     text-aligncenter;   
    9.     font-size24px;   
    10. }   
    11. .yy{   
    12.     positionrelative;   
    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.     positionabsolute;   
    20.     content'';   
    21.     top: 50%;   
    22.     bottombottom: -1px;   
    23.     left10px;   
    24.    rightright10px;   
    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.     width980px;   
    3.     height300px;   
    4.     margin: 0 auto;    
    5. }   
    6. .box li img{   
    7.     displayblock;   
    8.     width290px;   
    9.     height200px;   
    10. }   
    11. .box li{   
    12.    positionrelative;   
    13.     floatleft;   
    14.     width290px;   
    15.     height200px;   
    16.     background#FFFFFF;   
    17.     padding5px;   
    18.     margin-right25px;   
    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.     left18px;   
    30.     bottombottom11px;   
    31.     z-index: -2;   
    32.     backgroundtransparent;   
    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.     rightright18px;   
    48.     bottombottom11px;   
    49.     z-index: -2;   
    50.     backgroundtransparent;   
    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

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐