CSS 和 CSS3 的区别

CSS（Cascading Style Sheets）是用于网页样式设计的语言，它可以控制网页的布局、颜色、字体等方面的外观效果。CSS3 是 CSS 的升级版本，它增加了很多新的特性和模块，使得网页设计更加多样化和丰富。

特性比较

新增选择器

CSS3 增加了多个新的选择器，如属性选择器、伪类选择器、伪元素选择器等，使得样式控制更加精细。

/* 属性选择器 */
[class^="box"] {
  /* 以 "box" 开头的 class，如 box, box1, box2，都会应用此样式 */
  border: 1px solid black;
}
 
/* 伪类选择器 */
a:hover {
  /* 鼠标移动到链接上时的样式 */
  color: red;
}
 
/* 伪元素选择器 */
div::before {
  /* 在 div 元素前插入内容 */
  content: "前缀";
}

新增盒模型

CSS3 引入了多个新的盒模型，如 border-box 和 padding-box 等，使得元素的位置和大小更加灵活。

/* border-box 模型 */
.box {
  box-sizing: border-box;
  /* 元素的宽度和高度包括 padding 和 border */
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
}
 
/* padding-box 模型 */
.box {
  box-sizing: padding-box;
  /* 元素的宽度包括 padding，但不包括 border */
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

新增渐变

CSS3 引入了线性渐变和径向渐变两种方式，使得背景色的过渡更加自然。

/* 线性渐变 */
.box {
  /* 从左到右的渐变，颜色从 #f00 到 #00f */
  background: linear-gradient(to right, #f00, #00f);
}
 
/* 径向渐变 */
.box {
  /* 从圆心开始的径向渐变，颜色从 #f00 到 #00f */
  background: radial-gradient(circle, #f00, #00f);
}

新增动画

CSS3 允许通过关键帧动画，实现元素的动态效果，如旋转、缩放、渐变等。

/* 旋转动画 */
@keyframes rotate {
  /* 定义旋转过程 */
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.box {
  animation: rotate 2s linear infinite;
  /* 应用旋转动画，2 秒完成一次，线性过渡，无限重复 */
}

浏览器兼容性

CSS3 的新特性在各个浏览器中的兼容性不一。需要使用浏览器前缀或者 JavaScript 库来解决兼容性问题。

/* 浏览器前缀 */
.box {
  -webkit-border-radius: 5px; /* Safari, Chrome */
  -moz-border-radius: 5px; /* Firefox */
  border-radius: 5px; /* 标准写法 */
}
 
/* JavaScript 库 */
.box {
  /* 使用 jQuery 库实现动画效果 */
  $("div").animate({left: '+=100px'}, 1000);
}

总结

CSS3 带来了很多新特性和模块，使得网页设计更加多样化和丰富。但是需要考虑到浏览器兼容性问题，以及可能需要增加浏览器前缀或者使用 JavaScript 库来解决这些问题。