Page 102 - css揭秘

试一试 play.csssecrets.io/bevel-corners-clipped

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范

„ CSS 图像
http://w3.org/TR/css-images
„ CSS 变形
http://w3.org/TR/css-transforms
„ CSS 遮罩
http://w3.org/TR/css-masking

„ CSS 过渡
http://w3.org/TR/css-transitions

„ CSS 背景与边框（第四版）
http://dev.w3.org/csswg/css-backgrounds-4

13 梯形标签页

背景知识

基本的 3D 变形，“平行四边形”

难题

梯形的定义甚至比平行四边形还要宽泛一些：一个四边形只要有两条边
是平行的，就可以称作梯形，另外两条边可以是任意角度。一直以来，梯形 图 3-39
都是众所周知难以用 CSS 生成的形状，尽管它也十分常用，尤其是对于标 通过伪元素的边框模拟出的梯形
签页来说。网页开发者如果没有用精心设计的背景图片来实现梯形，那多半 （为了看得更清楚，伪元素用深色
就是在用边框来模拟梯形两侧的斜边（参见图 3-39）。 标示）

13 梯形标签页 71

඀ࠡ JOEC