20、利用 CSS 进行网页图形设计

利用 CSS 进行网页图形设计

一、目标概述

在网页设计中，我们可以借助 CSS 样式为网页增添丰富的视觉效果。本次主要目标涵盖创建图形框、添加背景图像、设置元素边框、创建圆角边框、打造图形边框、设置文本和盒子阴影、创建线性和径向渐变、设置元素透明度、应用 2D 和 3D 变换、应用 CSS 滤镜以及创建图像映射等方面。

二、创建图形框

在书籍和杂志里，图表与图表说明通常会置于一个独立的框中，与文章的主要内容区分开来。HTML5 引入了类似的结构元素，即 <figure> 和 <figcaption> 元素，其结构如下：

<figure> 
   content 
   <figcaption>caption text</figcaption> 
</figure>

其中， content 是图形框内要显示的内容， caption text 是与图形相关的描述文本。 <figcaption> 元素是可选的，可以放在图形框内容的前面或后面。

例如，以下代码标记了一个包含 tb_komatsu.png 图像文件的图形框，并带有相应的说明：

<figure> 
   <img src="tb_k