css3和css的区别

CSS（Cascading Style Sheets）是一种用于描述网页上的元素样式的标记语言。它可以控制网页的布局、颜色、字体、大小、背景等方面的样式。CSS3是CSS的最新版本，它引入了许多新的特性和功能，使得网页的样式更加丰富多样。

CSS3相较于CSS具有更多的选择器。CSS3中新增了一些选择器，可以更精确地选择页面上的元素。例如，CSS3中的属性选择器可以根据元素的属性值来选择元素，而不仅仅是根据元素的标签名或类名。下面是一个示例代码：

/* 选择所有class属性值以"btn"开头的元素 */
[class^="btn"] {
  background-color: blue;
  color: white;
}
/* 选择所有class属性值以"btn"结尾的元素 */
[class$="btn"] {
  background-color: red;
  color: white;
}
/* 选择所有class属性值包含"btn"的元素 */
[class*="btn"] {
  background-color: green;
  color: white;
}

CSS3引入了一些新的布局模块，使得网页的布局更加灵活。例如，CSS3中的Flexbox布局模块可以方便地实现弹性盒子布局，使得元素的排列和对齐更加简单。下面是一个示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  flex: 1;
  margin: 10px;
}

CSS3还新增了一些动画和过渡效果，使得网页的交互更加生动。例如，CSS3中的transition属性可以实现元素在不同状态之间的平滑过渡效果，而不需要使用JavaScript来控制。下面是一个示例代码：

.button {
  background-color: blue;
  color: white;
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red;
}

除了上述特性之外，CSS3还引入了更多的背景样式、边框样式、文本样式等功能，使得网页的样式更加丰富多样。例如，CSS3中的border-radius属性可以实现元素的圆角效果，而不需要使用图片或其他复杂的技巧。下面是一个示例代码：

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  border-radius: 50%;
}

CSS3相较于CSS具有更多的选择器、新的布局模块、动画和过渡效果，以及更丰富多样的背景样式、边框样式、文本样式等功能。这些新特性和功能使得开发者可以更加灵活地控制网页的样式，提升用户体验。