CSS完成斜面黑影实际效果的简易案例(强烈推荐

日期：2021-01-20 类型：科技新闻 

关键词：如何织梦建站，如何创建网站，网站建立，公众号搭建，网站建站的

不知道道大伙儿在做新项目的情况下遇见很绚丽多彩的设计方案图后会如何做。有1些设计方案图会常常应用黑影实际效果看上去更为立体式，1般状况下像我这类懒人立即就切图了。根本就沒有想着去科学研究1下编码如何完成。

后来大家的设计方案稿一直改啊改啊，***真是是烦死我了，他如果改了图我就要正版的切图拆换。因此我决策科学研究1下这个物品，实际上大家是能够完成的哦！

如图所示：

上面的实际效果便是平常写新项目最典型的实际效果了，做设计方案的小伙子伴毫无疑问了解PS分分钟搞定，可是编码完成起来大家还可以么？———告知她们：务必能够！哈哈o(∩_∩)o；说了大话那就下点时间科学研究1下吧！

第1一部分：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>  

第2一部分：CSS3

在大家看到上面这个照片的情况下大伙儿毫无疑问第1印象是CSS3的 box-shadow ,可是假如仅仅是这模样大家能够完成么？很确立不能以。

不管是斜面的也好還是翘边的也罢，box-shadow自身是没法完成的，大家必须相互配合CSS3的伪类元向来完成。

来1起看看编码吧！

斜面黑影大家就以下编码便可以完成了，不熟习伪类元素的小伙子伴能够自主查阅文本文档看看。

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: ⑴;   
  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: ⑵;   
  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(⑴2deg) rotate(⑸deg);   
  38.     -moz-transform: skew(⑴2deg) rotate(⑸deg);   
  39.     -webkit-transform: skew(⑴2deg) rotate(⑸deg);   
  40.     -o-transform: skew(⑴2deg) rotate(⑸deg);    
  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: ⑵;   
  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完成斜面黑影实际效果的简易案例(强烈推荐)便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：提升CSS编码高效率的撰写技能 返回下一篇：没有了