欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)曲面陰影效果的簡單實(shí)例(推薦)

  發(fā)布時間：2016-06-08 10:21:11   作者：佚名   我要評論
下面小編就為大家?guī)硪黄狢SS實(shí)現(xiàn)曲面陰影效果的簡單實(shí)例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

不知道大家在做項(xiàng)目的時候遇見很絢麗的設(shè)計(jì)圖后會怎么做。有一些設(shè)計(jì)圖會經(jīng)常使用陰影效果看上去更加立體，一般情況下像我這種懶人直接就切圖了。壓根就沒有想著去研究一下代碼怎么實(shí)現(xiàn)。

后來我們的設(shè)計(jì)稿總是改啊改啊，***簡直是煩死我了，他要是改了圖我就要正版的切圖更換。所以我決定研究一下這個東西，其實(shí)我們是可以實(shí)現(xiàn)的哦！

如圖所示：

photo01 (2)

上面的效果就是平時寫項(xiàng)目最典型的效果了，做設(shè)計(jì)的小伙伴肯定知道PS分分鐘搞定，但是代碼實(shí)現(xiàn)起來我們也可以么？———告訴他們：必須可以！哈哈o(∩_∩)o；說了大話那就下點(diǎn)功夫研究一下吧！

第一部分：HTML

頁面部分的內(nèi)容很簡單接下來讓我們看看CSS的部分吧。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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 ,但是如果僅僅是這樣子我們可以實(shí)現(xiàn)么？很明確不可以。

無論是曲面的也好還是翹邊的也罷，box-shadow自己是無法實(shí)現(xiàn)的，我們需要配合CSS3的偽類元素來實(shí)現(xiàn)。

來一起看看代碼吧！

曲面陰影我們就如下代碼就可以實(shí)現(xiàn)了，不熟悉偽類元素的小伙伴可以自行查閱文檔看看。

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

下面的代碼就是怎么去實(shí)現(xiàn)翹邊陰影的效果：

CSS Code復(fù)制內(nèi)容到剪貼板
  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的偽類元素來實(shí)現(xiàn)的，在視覺體驗(yàn)上為產(chǎn)品可是大大的加分哦！有興趣的小伙伴也來試試吧。

以上這篇CSS實(shí)現(xiàn)曲面陰影效果的簡單實(shí)例(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

相關(guān)文章

最新評論