-
在这里演示。
一些基本的CSS3的使用并不复杂，你可以试着写一个感兴趣的。
唯一复杂的地方是对浏览器标签的模拟。
如您所见，Chrome标签的基本特征如下：
梯形
圆角
宽度自适应
使用图片很容易，但是如何使用图片呢作为一个追求的前端，它必须与纯CSS3实现！
标签的HTML很简单：
xml代码将内容复制到剪贴板。
新的标签页
百度，你知道吗
新的标签页
梯形两端用于两端：前和后容易。
CSS代码将内容复制到剪贴板。
标签李：之前，
制表符{之后
宽度：16px；
身高：24px；
内容：；
边境：1px solid # 3b5c95；
}
当处理的位置，你需要注意元素之间的属性关系。
CSS代码将内容复制到剪贴板。
制表符李{
显示：内联块；
职位：相对；
Z指数：0；
}
标签李：之前，
制表符{之后
位置：绝对；
Z指数：3；
}
制表符{之前
左：- 12px；
}
制表符{之后
错误：- 12px；
}
变形使用CSS3变换。
CSS代码将内容复制到剪贴板。
制表符{之前
- o-transform：斜（- 22deg）；
MS变换：斜（- 22deg）；
-moz变换：斜（- 22deg）；
WebKit的变换：斜（- 22deg）；
变换：斜（- 22deg）；
}
制表符{之后
-o-transform: skew (22deg);
MS变换：斜（22deg）；
-moz变换：斜（22deg）；
WebKit的变换：斜（22deg）；
变换：斜（22deg）；
}
嗯，差不多完成了。然后需要一点调整，Chrome浏览器充满渐变色，高度、宽度和位置也需要调整。