使用CSS3製作乙個簡單的Chrome模擬器

2021-10-03 06:33:30 字數 589 閱讀 5807

可以看出,chrome標籤的基本特點如下:

梯形有圓角

寬度自適應

用可以輕鬆搞定,但是怎麼能用呢?作為乙個有追求的前端,肯定要用純css3實現啊!

標籤的html很簡單:

xml/html code複製內容到剪貼簿

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

css code複製內容到剪貼簿

.tabs li:before,

.tabs li:after

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

css code複製內容到剪貼簿

.tabs li

.tabs li:before,

.tabs li:after

.tabs li:before

.tabs li:after

變形則使用css3的transform。

css code複製內容到剪貼簿

.tabs li:before

.tabs li:after

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

使用css3製作盒子

直接切圖製作這樣的盒子的話可能不用花很長的時間,但是使用css3的話卻是可以大大加快頁面載入速度的 所以嘗試了一下,當然並不是出於載入速度的考慮,純粹的因為shoujian tothtml registergiftbox registergift registergift registergifti...

使用CSS3製作倒影

webkit box reflect仍然是乙個非標準屬性,目前僅在chrome safari和opera瀏覽器下支援,可惜的是在firefox下並不支援這個屬性,不過值得慶幸的是,在firefox下可以通過element svg的mask來模擬實現.webkit box reflect none k...

css 使用css3畫乙個扇形

四個半圓疊加,過半調整 z index container div fan 1,fan 3 fan 2,fan 4 fan 1,fan 2 fan 3,fan 4 fan 4 fan 2 fan 3 keyframes zindex 50 50.000001 to keyframes rotate ...