萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS3制作一個簡單的Chrome模擬器

使用CSS3制作一個簡單的Chrome模擬器

   都是一些基本的CSS3的使用,並不復雜。各位有興趣地可以試著也寫一個。

  唯一復雜的地方是浏覽器標簽的模擬。

2015715180124630.jpg (600×75)

  可以看出,Chrome標簽的基本特點如下:

  梯形

  有圓角

  寬度自適應

  用圖片可以輕松搞定,但是怎麼能用圖片呢?作為一個有追求的前端,肯定要用純CSS3實現啊!

  標簽的HTML很簡單:

  XML/HTML Code復制內容到剪貼板

  

     

      

  • 新標簽頁
  •  

      

  • 百度一下,你就知道
  •  

      

  • 新標簽頁
  •  

      

 

  梯形的兩端用:before 與 :after 輕松搞定。

  CSS Code復制內容到剪貼板

  .tabs li:before,

  .tabs li:after {

  width: 16px;

  height: 24px;

  content: " ";

  border: 1px solid #3b5c95;

  }

  處理定位的時候需要注意元素間的z-index關系。

  CSS Code復制內容到剪貼板

  .tabs li {

  display: inline-block;

  position: relative;

  z-index: 0;

  }

  .tabs li:before,

  .tabs li:after {

  position: absolute;

  z-index: 3;

  }

  .tabs li:before {

  left: -12px;

  }

  .tabs li:after {

  rightright: -12px;

  }

  變形則使用CSS3的transform。

  CSS Code復制內容到剪貼板

  .tabs li:before {

  -o-transform: skew(-22deg);

  -ms-transform: skew(-22deg);

  -moz-transform: skew(-22deg);

  -webkit-transform: skew(-22deg);

  transform: skew(-22deg);

  }

  .tabs li:after {

  -o-transform: skew(22deg);

  -ms-transform: skew(22deg);

  -moz-transform: skew(22deg);

  -webkit-transform: skew(22deg);

  transform: skew(22deg);

  }

  好了,差不多大功告成了。接下來還要稍微調整下,對照Chrome浏覽器填充下漸變色,高度、寬度、位置也需要微調一下。

copyright © 萬盛學電腦網 all rights reserved