图形和布局

CSS 3及更高版本定义了定义了简单而强大的特性来创建图形效果，例如圆角、阴影效果和旋转内容等。

动画可以通过CSS动画和CSS过渡声明性地描述。

使用脚本控制的动画可能需要很多计算资源，特别是在受限制的移动设备上。动画帧提供了管理动画更新速率的可能性。

默认情况下，CSS的盒模型规定元素的任何内边距和边框都要在指定的宽度和高度之外设置和绘制。因此，一个方框的有效外部大小会随着填充和边框的使用而变化，这使得响应式布局的设计变得复杂，开发者希望根据屏幕的大小改变框（box）的大小。box-sizing属性的 border-box 值告诉用户代理在指定的宽度和高度内设置内边距和边框，简化了响应式布局的设计。

CSS 弹性盒式布局和CSS 网格布局引入了两种新的布局模式，用于布局更复杂的应用程序。值得注意的是，通过允许在屏幕上重新排列元素的顺序，这两类新的布局模式可以保持内容本身（HTML 和 SVG）与其布局之间的清晰分离，而不必更改底层HTML。这对于需要调整用户界面和用户体验以适应屏幕和可用交互机制的移动设备尤为重要（另请参阅设备适配）。

弹性盒式布局专注于轴内排版，并采用更简单的自下而上的方式进行布局，而网格布局采用二维的排版方式，并使用自顶向下的方式进行布局。这两种布局方式互相补充，都将成为对 Web 开发者有用的工具。

行间注（ruby）是标注在字词旁侧的小字号补充文本，常见于东亚文字的排版中，主要用于标音与释义。HTML 的 ruby 元素可以为文本添加行间注。CSS Ruby 中定义的 ruby-align、ruby-position 和其他属性提供了一种控制 ruby 元素的渲染的方法。

字体在构建引人入胜的图形界面中扮演着重要的角色，但移动设备通常只包含有限的字体。WOFF（Web 开放字体格式）通过使字体能够通过样式表很方便地自动下载来解决该限制，同时将下载字体的大小限制为呈现用户界面实际所需的大小。WOFF对移动设备友好，这归功于字体数据预处理和优化步骤，可减少字体数据结构的冗余，以及专门的熵压缩编码方案，即使在使用低端移动设备时也不需要使用过多的CPU或内存资源来解码。

SVG（可扩展矢量图形）提供了一种基于 XML 的标记语言来描述二维矢量图形。由于这些图形被描述为一组几何形状，因此可以根据用户的请求进行缩放，这使得 SVG 非常适合在屏幕空间有限的移动设备上创建图形。SVG也很容易制作动画，以及复杂和平滑的用户界面。

SVG 在 HTML5 中的整合开辟了新的可能性，例如将高级图形过滤器（通过SVG过滤器）应用于多媒体内容（包括视频）。SVG 2 完善了上述整合和 SVG 的特性集合。

作为 SVG 提供的声明性方法的补充，HTML5 中添加的 <canvas> 元素使2D编程API非常适合以较少内存占用的方式处理图形。

作为 Khronos Group 的一部分在 W3C 之外开发的 WebGL 为 Web 提供了底层3D图形API。该 API 与 OpenGL ES 兼容，适用于嵌入式系统，并可在移动设备上运行。基于 OpenGL ES 2.0 的 WebGL v1.0 有很好的跨设备支持，而基于 OpenGL ES 3.0 的 WebGL v2.0 的支持则较少。W3C 正在进行更新的 WebGPU API 的工作，请参阅下面的开发中的技术部分。