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

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

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

　　可以看出，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浏覽器填充下漸變色，高度、寬度、位置也需要微調一下。