CSS 3.0 概述

CSS 3.0 是 Cascading Style Sheets (层叠样式表) 的最新版本，它为网页设计师和开发者提供了大量的新特性，用于更灵活和高效的页面布局、效果和动画控制。相比于 CSS 2.1，CSS 3 引入了许多先进的功能，如动画、阴影、渐变、圆角等，帮助创建更加现代化和互动性强的网页。

CSS 3.0 的主要特性

1. 选择器增强

CSS3 引入了多种新的选择器，使得开发者能够更精准地选择 DOM 元素。

  • :nth-child(n)：可以选择匹配父元素中特定的子元素，n 可以是数字、关键字或公式。li:nth-child(2) { color: red; }
  • :nth-of-type(n)：选择特定类型的子元素。p:nth-of-type(odd) { background-color: #f0f0f0; }
  • :last-child：选择父元素中的最后一个子元素。div:last-child { border-bottom: 1px solid black; }
  • :not(selector)：选择不匹配给定选择器的元素。p:not(.active) { color: gray; }

2. 圆角（Border Radius）

CSS3 引入了对元素圆角的支持。使用 border-radius 属性可以很容易地创建圆角效果。

div {
  border-radius: 10px;
}
  • 还可以为不同的角指定不同的半径：
div {
  border-radius: 10px 20px 30px 40px;
}

3. 渐变（Gradients）

CSS3 增加了对渐变的支持，允许创建线性渐变和径向渐变。

  • 线性渐变：渐变颜色沿着一个方向变化。
background: linear-gradient(to right, red, yellow);
  • 径向渐变：颜色围绕一个中心点放射性扩展。
background: radial-gradient(circle, red, yellow);

4. 阴影（Shadows）

CSS3 允许在元素和文本上应用阴影效果，提升了网页的视觉表现。

  • 文本阴影：使用 text-shadow 属性。
h1 {
  text-shadow: 2px 2px 5px gray;
}
  • 盒子阴影：使用 box-shadow 属性，可以设置水平、垂直、模糊半径以及阴影颜色。
div {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

5. 多背景图（Multiple Backgrounds）

CSS3 允许在一个元素上使用多个背景图。多个图像可以用逗号分隔，并且每个图像都可以有独立的定位。

div {
  background: url('image1.jpg') no-repeat, url('image2.jpg') no-repeat;
  background-position: top left, bottom right;
}

6. 变换（Transforms）

CSS3 引入了 transform 属性，允许你对元素进行旋转、缩放、倾斜和位移。

  • 旋转（rotate）：
div {
  transform: rotate(45deg);
}
  • 缩放（scale）：
div {
  transform: scale(1.5);
}
  • 平移（translate）：
div {
  transform: translate(50px, 100px);
}
  • 倾斜（skew）：
div {
  transform: skew(30deg, 10deg);
}

7. 动画和过渡（Animations & Transitions）

  • 过渡（Transitions）：CSS3 提供了过渡效果，可以在元素状态变化时平滑过渡。
div {
  transition: all 0.5s ease-in-out;
}
div:hover {
  background-color: red;
}
  • 动画（Animations）：可以定义关键帧动画，在元素的不同状态之间切换。
@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

div {
  animation: example 4s infinite;
}

8. 媒体查询（Media Queries）

CSS3 引入了响应式设计的关键——媒体查询。它允许根据设备的不同特性（如屏幕宽度、高度、分辨率等）应用不同的样式。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

9. 透明度（Opacity）

CSS3 支持通过 opacity 属性设置元素的透明度，值的范围是 0（完全透明）到 1（完全不透明）。

div {
  opacity: 0.5;
}

10. 自定义字体（Web Fonts）

CSS3 引入了 @font-face 规则，可以让网页使用任何自定义字体，而不仅仅是用户系统中已有的字体。

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff") format("woff");
}

body {
  font-family: "MyCustomFont", sans-serif;
}

CSS3 样式属性总结

属性描述
border-radius创建圆角边框
linear-gradient创建线性渐变背景图
radial-gradient创建径向渐变背景图
box-shadow给元素添加阴影
text-shadow给文本添加阴影
transform旋转、缩放、倾斜和平移元素
transition平滑过渡效果
animation定义关键帧动画
@media创建响应式设计，依据设备特性应用样式
opacity设置元素透明度
@font-face引入自定义字体

总结

CSS3 引入了许多强大的新特性，使得网页设计更灵活、美观，并且提高了用户体验。无论是使用 渐变、动画还是 响应式设计、媒体查询，都使得开发者能够更方便地创建现代化的网页。随着浏览器对 CSS3 支持的不断加强，开发者可以更多地使用这些特性来优化网页的视觉效果和交互体验。