css3和css2的通用型

CSS（Cascading Style Sheets）是一种用于描述网页上元素样式的标记语言。它可以控制网页的布局、颜色、字体、大小等方面，使网页变得更加美观和易于阅读。CSS3是CSS的第三个版本，相比CSS2，它引入了许多新的功能和特性，提供了更强大的样式控制能力。

CSS3与CSS2的通用性主要体现在以下几个方面：

1. 选择器的扩展：CSS3引入了一些新的选择器，使得选择元素更加灵活和精确。例如，CSS3中的属性选择器可以根据元素的属性值选择元素，而不仅仅是根据元素的标签名或类名。这样可以更方便地对特定属性值的元素进行样式控制。示例代码如下：

/* 选择所有具有title属性的元素 */
[title] {
  color: red;
}
/* 选择所有href属性值以https开头的链接 */
a[href^="https"] {
  color: blue;
}

2. 盒模型的改进：CSS3对盒模型进行了改进，使得布局更加灵活和精确。CSS2中的盒模型是由内容、内边距、边框和外边距组成的，而CSS3引入了新的属性，如box-sizing和border-radius，可以更好地控制盒子的大小和形状。示例代码如下：

/* 设置盒子的宽度和高度包括内边距和边框 */
.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
}
/* 设置盒子的边框为圆角 */
.box {
  border-radius: 10px;
}

3. 渐变和阴影效果：CSS3引入了渐变和阴影效果，使得页面的视觉效果更加丰富和吸引人。通过使用linear-gradient和radial-gradient等属性，可以在背景中创建平滑的渐变色。而box-shadow属性可以添加阴影效果，使元素在页面上更加立体和有层次感。示例代码如下：

/* 创建从上到下的渐变色背景 */
.gradient-bg {
  background: linear-gradient(to bottom, red, blue);
}
/* 创建圆形阴影 */
.shadow {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

总结来说，CSS3相比CSS2在选择器、盒模型和视觉效果方面都有了很大的提升。这些新的功能和特性使得开发人员可以更加灵活地控制网页的样式，提供更好的用户体验。由于一些老旧的浏览器不支持CSS3的部分功能，开发人员在使用CSS3时需要考虑兼容性问题，并针对不同的浏览器提供相应的样式备选方案。