它是使用<code>hsl(h, s, l)指定的。色调是从0到360的值，对应于颜色轮上的角度。0是红色，120是绿色，240是蓝色，360又回到红色。饱和度是颜色的百分比，其中0%是完全灰色，100%是全彩色。亮度是亮度的百分比，其中0%是黑色，50%是全彩色，100%是白色。您可以像rgb()一样指定它，也可以不带 alpha 值，如下所示：

hsl(240, 100%, 50%);

hsla(240, 100%, 50%, 0.5);

大多数人不会考虑 HSL 中的颜色，但它确实存在，以防您想要使用它。如果您想尝试一下，可以在hslpicker.com找到一个不错的 HSL 选择器。

圆角

我们将要看的第一个 CSS3 效果是圆角，因为在 CSS3 之前这是一个非常受欢迎的功能。过去，如果您想要圆角，只有一些非最佳的解决方案可用。您可以加载四个图像，每个角一个，然后添加一些额外的标记来使它们对齐（并尝试使其在所有浏览器中工作）。或者使用多个div标签来“绘制”圆角边框的某种黑客方式。或者其他半打方法之一。最终，它们都不是很好的解决方案。那么为什么我们要如此努力地在 CSS3 之前使圆角边框起作用呢？因为人们被它们吸引，它们似乎让您的设计看起来更自然。

使用 CSS3 的新border-radius属性非常容易地向元素添加圆角。如果您希望每个角具有相同的边框半径，只需给出一个值，如下所示：

border-radius: 0.5em;

如果要将边框的每个角设置为不同的半径，也可以这样做。值按照 CSS 属性的标准顺序，顺时针从左上角开始：左上，右上，右下和左下。

border-radius: 1px 4px 8px 12px;

您可以设置一个、两个、三个或四个值。一和四是不言自明的。

如果设置了两个值，则第一个值适用于左上和右下，第二个值适用于右上和左下。因此，它是相对的角。

如果设置了三个值，则第二个值适用于右上和左下。第一个适用于左上，第三个适用于右下。

您还可以单独定义每个角的半径，如下所示：

border-top-left-radius: 1px;

border-top-right-radius: 4px;

border-bottom-right-radius: 8px;

border-bottom-left-radius: 12px;

注意

想要创建圆形或椭圆形？将border-radius值设置为50%。

阴影

在 CSS3 中，向元素和文本添加阴影非常简单。使用阴影使某些元素真正脱颖而出，并为您的 UI 赋予更自然的外观。有许多选项可用于添加阴影，例如大小、位置和颜色。阴影不一定总是在元素和文本后面；它们也可以为它们提供框架、突出显示和添加效果。

盒子阴影

除了圆角，您还可以使用新的 CSS3 <code>box-shadow属性为元素添加阴影。box-shadow属性接受一些参数，告诉它如何绘制阴影：

box-shadow: h-offset v-offset blur-radius spread-radius color;

以下是参数的解释：

h-offset：阴影的水平偏移。负值将阴影放在元素的左侧。

v-offset：阴影的垂直偏移。负值将阴影放在元素上方。

blur-radius：确定模糊量；数字越高，模糊越多（可选）。

spread-radius：阴影的大小。如果为零，则与模糊大小相同（可选）。

color：阴影的颜色（可选）。

inset：添加inset以将阴影从外部更改为内部（可选）。

注意

您可以使用box-shadow属性为元素添加除阴影之外的一些有趣效果。通过将offset值设置为零并调整模糊和扩展（请参见前两个示例），您可以为元素设置内部或外部发光。

文本阴影

除了盒子阴影，CSS3 还支持使用<code>text-shadow属性添加文本阴影。它的工作方式几乎与box-shadow相同，并且使用几乎相同的参数：

text-shadow: h-offset v-offset blur-radius color;

与box-shadow一样，您可以产生一些有趣的效果，例如发光文本：

行动时间-样式行动

让我们在任务列表应用程序中充分利用<code>border-radius和box-shadow效果。首先，我们将在页面上居中显示任务列表。然后我们将在每个任务周围放一个有圆角和阴影的框。让我们打开taskAtHand.css并进行一些更改。您可以在chapter2/example2.1中找到此部分的代码。

首先，我们将更改包含task-name文本字段和任务列表的<div id="main">code>元素的样式。让我们给这个部分设置一个最小宽度为9em，最大宽度为25em。我们不希望任务列表变得太宽或太小，以便更容易阅读。这将为我们提供一个反应式布局的开端。我们还将将上下边距设置为1em，将左右边距设置为auto以使其在页面上居中。

注意

线性渐变是使用<code>background属性上的linear-gradient指定符来定义的。对于最简单的形式，你可以使用我们在颜色部分讨论过的任何color指定符来指定起始和结束颜色，它会从元素的顶部到底部绘制渐变。以下是从红色到蓝色的渐变：

background: linear-gradient(#FF0000, #0000FF);

尽管渐变目前受到几乎所有浏览器的支持，但您仍然必须使用特定于浏览器的前缀才能使其工作。这意味着至少要指定四次才能覆盖大多数浏览器。请记住，始终将非专有版本指定为最后一个，如下面的 CSS 片段所示，这样它将在可用时覆盖特定于浏览器的版本：

background: -webkit-linear-gradient(#FF0000, #0000FF);

background: -moz-linear-gradient(#FF0000, #0000FF);

background: -ms-linear-gradient(#FF0000, #0000FF);

background: linear-gradient(#FF0000, #0000FF);

如果要使渐变从顶部开始，可以指定第一个参数，该参数可以是要从其开始的侧面的名称或旋转的量。侧面有top、bottom、left和right。您可以指定从-360deg到360deg的度数，或从-6.28rad到6.28rad的弧度。0与left相同。正数逆时针旋转，负数顺时针旋转。以下是从left到right绘制渐变的示例：

background: linear-gradient(left, #FF0000, #0000FF);

以下是以45度角绘制的渐变，即从左下角开始：

background: linear-gradient(45deg, #FF0000, #0000FF);

如果愿意，您还可以添加多于两个的颜色停止。以下是从红色到蓝色到绿色的45度角渐变：

background: linear-gradient(45deg, #FF0000, #0000FF, #00FF00);

以下是这些代码片段的显示方式：

径向渐变

径向渐变在其使用的参数上几乎与线性渐变相同。默认情况下，从元素的中心到边缘绘制渐变：

<code>background: radial-gradient(#FF0000, #0000FF);

您还可以指定位置，例如使用预定义位置或从顶部左侧角的偏移点作为渐变的中心：

background: radial-gradient(top, #FF0000, #0000FF);

以下是以距离左上角20像素和20像素处为中心绘制的渐变：

background: radial-gradient(20px 20px, #FF0000, #0000FF);

您还可以为径向渐变添加多于两个的颜色停止。以下是从红色到蓝色到绿色的渐变，中心位于距左侧20像素和下方20像素的位置：

background: radial-gradient(20px 20px, #FF0000, #0000FF, #00FF00);

以下是这些代码片段的显示方式：

您可以指定许多其他设置来实现一些有趣的渐变效果，但这超出了本书的范围。如果发现自己创建自己的渐变太难，可以在<code>www.colorzilla.com/gradient-editor/找到一个出色的渐变生成器。

背景图片

您可以将背景图像的大小设置为固定像素量或元素区域的百分比。图像将被缩放以适应指定的区域。background-size属性接受两个值：水平大小和垂直大小。如果要使背景图像填充元素的整个背景，可以使用以下方法：

background-size: 100% 100%;

您可以通过用逗号分隔它们来指定多个背景图像。列表中的第一张图像将绘制在顶部，最后一张将绘制在底部。以下是绘制两个背景图像的示例：

background: url(bg-front.png),

url(bg-back.png);

还有一个新的<code>background-origin属性，用于确定背景图像的绘制位置。可能的值如下：

content-box：仅在元素的内容区域中绘制背景图像

padding-box：将背景图像绘制到元素的填充区域

border-box：将背景图像一直绘制到元素的边框

以下是一个示例：

background-origin: content-box;

以下是输出：

CSS 精灵

我们接下来要讨论的概念是 CSS 精灵。这种技术对于 CSS3 来说并不新鲜，但在编写 HTML5 应用程序时，了解如何使用它是很重要的。CSS 精灵允许您将应用程序中的所有图像放入单个图像文件中，然后使用 CSS 将单个图像切片到元素中。这种技术节省了下载多个图像所需的时间和网络资源。如果您的应用程序有很多小图像，这种技术尤其有用。

要实现 CSS 精灵，将所有图像放入单个图像文件中，称为精灵表。然后按照以下步骤将精灵表中的图像放入页面上的元素中：

使元素与要显示的图像大小相同。

将元素的背景图像设置为精灵表图像。

调整精灵表的背景位置，使要查看的图像位于元素的左上角。

让我们看一个例子。以下精灵表有 16 张图片，每张图片宽 10 像素，高 10 像素。首先，我们将元素的<code>width和height属性设置为10像素。接下来，我们将背景图像设置为sprite-sheet.png精灵表。如果我们现在停下来，我们只会在我们的元素中看到第一张图片。

但是我们想要在我们的元素中显示第七张图片。因此，我们需要将精灵表的背景位置向左移动 20 像素，向上移动 10 像素。您必须使用负偏移来将正确的图像放置在位置上，因为您正在移动背景图像，而不是元素：

#seven

{

Width: 10px;

height: 10px;

background-image: url(sprite-sheet.png);

background-position: -20px -10px;

}

这是结果：

注意

将其视为在网页上切割一个洞，然后在洞后面滑动精灵表，直到正确的图像显示在洞中。

行动时间 - 添加渐变和按钮图像

让我们利用我们对渐变和背景图像的了解，使我们的应用程序看起来更有趣。首先，我们将在我们的任务列表应用程序的背景中添加一个渐变。我们将在<code><div id="app">code>元素上添加一个线性渐变。它将从顶部开始，渐变为底部的深蓝色。请注意，我们保留旧的背景颜色作为不支持渐变的浏览器的回退：

#app

{

margin: 4px;

background-color: #bbc;

background: -webkit-linear-gradient(top, #bbc, #558);

background: -moz-linear-gradient(top, #bbc, #558);

background: -ms-linear-gradient(top, #bbc, #558);

background: linear-gradient(top, #bbc, #558);

}

这就是它的样子：

现在让我们使用 CSS 精灵将图像添加到任务列表应用程序中的按钮。我们需要删除、向上移动和向下移动的图像。我们的按钮将是 16x16 像素，因此我们的图像也需要是相同的大小。由于我们有三张图片，我们将创建一个 48 像素宽、16 像素高的精灵表。我们将把名为<code>icons.png的精灵表图像文件放入images文件夹中。

现在让我们打开<code>taskAtHand.css并添加样式，将图像从精灵表中提取到按钮中。首先，我们将更改适用于所有任务按钮的样式，将大小设置为 16x16 像素，并将背景图像设置为我们的精灵表。这样，我们只需要指定一次精灵表图像，它就会应用到我们所有的按钮上：

#task-list .task .tools button

{

margin: 0;

padding: 0;

border: none;

color: transparent;

width: 16px;

height: 16px;

background: url(images/icons.png);

}

现在我们所有的按钮都将使用icons.png作为它们的背景。我们现在所要做的就是设置每个按钮的背景位置，使它们与正确的图像对齐：

#task-list .task .tools button.delete

{

background-position: 0 0;

}

#task-list .task .tools button.move-up

{

background-position: -16px 0;

}

#task-list .task .tools button.move-down

{

background-position: -32px 0;

}

刚刚发生了什么？

现在在浏览器中查看应用程序。我们添加了渐变，所以它不再那么沉闷和单调。现在它看起来现代而时尚。我们使用 CSS 精灵向按钮添加图像，从一个精灵表图像中提取图像。有了真正的按钮图标，这样看起来不是更好吗？

过渡

现在我们有一个相当不错的 UI，但是我们可以通过一些过渡效果使其变得更好。CSS3 过渡在元素样式改变时为元素添加动画效果。例如，如果我们改变元素的大小，它将逐渐从较小的大小变为较大的大小，从而为用户提供视觉反馈。当事物逐渐改变时，它比突然出现在页面上的东西更容易引起我们的注意。

CSS3 的<code>transition属性允许我们在元素上指定过渡。它的格式如下：

transition: property duration timing-function delay

以下是参数的解释：

property：要添加过渡的 CSS 属性。例如，width或color。使用all将过渡应用于所有属性。

duration：过渡所需的时间长度。例如，0.5s需要半秒钟来完成过渡。

timing-function：确定过渡在持续时间内的进展方式：

linear：从开始到结束的速度相同

ease：开始缓慢，然后加速，然后结束缓慢

ease-in：开始缓慢然后加速

ease-out：开始快然后减慢

ease-in-out：先缓慢，然后加速

cubic-bezier(): 如果你不喜欢预定义的函数，你可以构建自己的

delay: 开始过渡之前等待的时间。

cubic-bezier函数接受四个参数，这些参数是从0到1的数字。以下产生与ease函数相同的效果：

transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);

构建自己的cubic-bezier函数并不是大多数人可以凭空做到的。如果你想探索创建自己的时间函数，请访问cubic-bezier.com/。

与渐变一样，过渡得到了广泛的支持，但在声明时仍应使用特定于浏览器的前缀：

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

transition: all 1s ease;

应用过渡的最简单方法是与 CSS 的hover选择器结合使用。当用户将鼠标移动到元素上时，以下内容将使元素的背景颜色从白色渐变到蓝色，用时 0.25 秒：

#some-element

{

background-color: White;

transition: all 0.25s ease;

}

#some-element:hover

{

background-color: Blue;

}

变换

CSS3 变换提供了更复杂的效果。有 2D 和 3D 变换可用。我们将在这里讨论一些 2D 变换。变换可以与过渡一起使用，提供一些有趣的效果。这是transform属性的基本形式：

transform: function();

有一些不同的 2Dtransform函数。我们首先看的是translate()。它将一个元素从当前位置移动到一个新位置。它以 x 和 y 位置作为参数。你可以使用负值向上和向左移动。以下将使一个元素向右移动10像素，向上移动25像素：

transform: translate(10px, -25px);

rotate()函数按给定的角度旋转元素。旋转量可以用度或弧度来指定。使用负值逆时针旋转，正值顺时针旋转：

transform: rotate(45deg);

scale()函数通过某个因子调整元素的大小。它接受一个或两个参数。如果只提供一个参数，它将按该量进行缩放。如果指定了两个参数，它将分别缩放水平和垂直轴。以下示例将元素的宽度加倍，高度减半：

transform: scale(2, 0.5);

我们将看一下skew()函数。这个函数扭曲或拉伸一个元素。它接受两个参数，即旋转 x 和 y 轴的量。角度的指定方式与rotate()函数相同：

transform: skew(45deg, 10deg);

变换还需要特定于浏览器的前缀：

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

以下是变换在浏览器中的样子：

行动时间-效果在行动

让我们给任务列表添加一些效果。首先，我们将添加选择列表中任务的能力。当点击一个任务时，它将增大并获得一个有颜色的边框，这样就很容易看出它被选中了。我们还将为任务添加悬停效果，这样当用户将鼠标移动到一个任务上时，任务的操作按钮就会显示出来。当鼠标移出任务时，按钮将淡出。你可以在<code>chapter2/example2.2中找到这一部分的代码。

我们需要做的第一件事是回到taskAtHand.js，并在addTaskElement()方法中创建task元素后添加一个click事件处理程序：

$task.click(function() { onSelectTask($task); });

当点击一个任务时，它调用onSelectTask()方法。在这个方法中，我们将通过给它一个selected类名来标记一个task元素为选定。我们还将从先前选定的任务元素中删除selected类：

function onSelectTask($task)

{

if ($task)

{

// Unselect other tasks

$task.siblings(".selected").removeClass("selected");

// Select this task

$task.addClass("selected");

}

}

现在让我们在taskAtHand.css中为选定的任务添加样式。我们将增加填充以使元素更大，添加边框以突出显示它，并改变背景颜色：

#task-list .task.selected

{

padding: 0.6em 0.5em;

border: 2px solid orange;

border-radius: 6px;

background-color: white;

}

这很好，但我们可以通过添加过渡来使它更好。我们将在.task类中添加transition属性。它将在 0.25 秒内平稳地改变所有属性。当用户选择一个任务时，这将为用户提供一些良好的视觉反馈：

#task-list .task

{

/* Not shown... */

-webkit-transition: all 0.25s ease;

-moz-transition: all 0.25s ease;

-o-transition: all 0.25s ease;

transition: all 0.25s ease;

}

在此期间，让我们再添加一个过渡效果。我们将隐藏任务操作按钮，直到用户将鼠标移动到任务上或选择任务。为此，我们只需要添加一些额外的 CSS。首先，我们将通过将其opacity属性设置为0来隐藏任务按钮的容器元素，使其变为透明。然后，我们添加与之前相同的transition属性：

#task-list .task .tools

{

position: absolute;

top: 0.25em;

right: 0.25em;

border: 1px solid black;

border-radius: 2px;

opacity: 0;

-webkit-transition: all 0.25s ease;

-moz-transition: all 0.25s ease;

-o-transition: all 0.25s ease;

transition: all 0.25s ease;

}

现在我们为task元素添加一个hover选择器，将opacity属性设置为1，使其不透明。这个选择器和过渡一起，将使任务按钮在用户悬停在任务上时出现淡入效果。我们还添加了一个选择器，使任务按钮在选择任务时显示出来（以下片段中的第二行）：

#task-list .task:hover .tools,

#task-list .task.selected .tools

{

opacity: 1;

}

在 CSS3 之前，您可以使用 jQuery 的fadeIn()和fadeOut()方法以及一些鼠标事件来使用 JavaScript 做同样的事情，但这需要更多的代码。

刚刚发生了什么？

我们在任务列表中添加了一些 CSS3 过渡效果，使任务项目按钮淡入淡出，并在单击时使选定的任务项目变大。我们已经看到，只需几行 CSS 代码，我们就可以为我们的应用程序添加一些不错的效果。现在我们的任务列表看起来是这样的，Task 2被选中：

动态样式表

让我们为我们的应用程序添加一个新功能，允许用户选择颜色方案或主题，以便他们可以自定义应用程序的外观和感觉。我们可以通过动态加载 CSS 文件来改变网页的外观，以覆盖默认样式表中的现有样式。为了实现这一点，我们将在应用程序中添加一个主题的下拉列表供用户选择。当他们改变主题时，它将改变样式表，从而改变页面的颜色。

行动时间-添加主题选择器

首先，我们需要一个放置主题选择器的地方。因此，让我们在<code>taskAtHand.html中的任务列表应用程序的标记中添加一个工具栏。我们将它插入在<header>和<div id="main">code>元素之间。工具栏将包含一个<label>和一个<select>下拉列表。列表将包含四种不同的颜色主题：blue、green、magenta和red。您可以在chapter2/example2.3中找到此部分的代码：

<div id="app">code>

<header>Task@Hand</header>

<div id="toolbar">code>

<label for="theme">Theme</label>code>

<select id="theme" title="Select theme">code>

<option value="blue">Blue</option>code>

<option value="green">Green</option>code>

<option value="magenta">Magenta</option>code>

<option value="red">Red</option>code>

</select>

</div>

<div id="main">code>

现在让我们设计工具栏。我们将使字体比页面的其他部分稍微小一些，并将背景颜色设置为黑色，并带有一些透明度，以便它后面的颜色透过来：

#toolbar

{

padding: 0.25em;

font-size: 0.8em;

color: WhiteSmoke;

background-color: rgba(0, 0, 0, 0.4);

}

接下来，我们必须实现不同的主题。因此，让我们创建一些新的 CSS 文件，每个主题一个文件。我们将把它们放在一个名为themes的文件夹中，以便将它们分组在一起。CSS 文件将与<option>值具有相同的名称：blue.css、green.css、magenta.css和red.css。让我们来看一下green.css：

#app

{

background-color: #bcb;

background: -webkit-linear-gradient(top, #bcb, #585);

background: -moz-linear-gradient(top, #bcb, #585);

background: -ms-linear-gradient(top, #bcb, #585);

background: linear-gradient(top, #bcb, #585);

}

#app>header,

#app>footer

{

background-color: #060;

}

从顶部开始，我们覆盖app元素的背景渐变，使它们成为绿色，而不是蓝色。我们还将header和footer元素改为绿色。其他 CSS 文件将与此文件完全相同，只是它们的颜色会有所不同。

现在让我们在 HTML 文件的<header>元素中添加一个样式表<link>元素，用于主题 CSS 文件。由于蓝色主题是默认的，我们将设置它加载blue.css：

<link href="taskAtHand.css" rel="StyleSheet" />code>

<link id="theme-style" href="themes/blue.css" rel="StyleSheet" />code>

请注意，我们在基本样式表之后包含主题样式表。这将允许我们覆盖默认样式。还要注意，我们给<link>元素一个ID属性，这样我们以后就可以在 JavaScript 中访问它。

我们需要添加的其余代码在taskAtHand.js中。首先，我们将在TaskAtHand.start()方法中为主题选择器添加一个change事件处理程序：

$("#theme").change(onChangeTheme);

当用户选择新主题时，它将调用onChangeTheme()私有方法：

function onChangeTheme()

{

var theme = $("#theme>option").filter(":selected").val();

setTheme(theme);

appStorage.setValue("theme", theme);

}

这个方法通过获取其<option>元素并使用 jQuery 的:selected选择器在filter()方法内找到选定的选项，从列表中获取所选选项。然后调用setTheme()方法，接下来我们将实现。最后，我们将所选主题保存到localStorage，这样下次用户返回应用程序时就可以设置它。

setTheme()方法接受主题名称作为参数。它获取<link id="theme-style">code>元素，并将其href属性更改为新样式表的 URL：

function setTheme(theme)

{

$("#theme-style").attr("href", "themes/" + theme + ".css");

}

当这发生时，页面将加载新的样式表，并将其样式应用于现有样式。就像这样，页面的颜色发生了变化。

等等，我们还没有完成。还记得我们是如何将主题保存到localStorage的吗？现在当用户返回我们的应用程序时，我们需要将其取出。我们将创建一个loadTheme()方法来做到这一点：

function loadTheme()

{

var theme = appStorage.getValue("theme");

if (theme)

{

setTheme(theme);

$("#theme>option[value=" + theme + "]")code>

.attr("selected","selected");

}

}

这个方法从localStorage获取主题名称。如果找到了一个，它就调用setTheme()来设置它。然后通过在列表中找到具有其值为主题名称的<option>，并在其上设置selected属性，来选择该主题。最后一件事是从start()方法中添加对loadTheme()的调用，然后我们就完成了。

注意