css3跟css区别是什么

什么是CSS？

Cascading Style Sheets（层叠样式表），简称CSS，是用于描述网页样式的语言。它可以控制文本的颜色、字体、间距、背景色等各种外观效果，还可以对网页的布局、排版等方面进行控制。

在网页设计中，CSS与HTML紧密结合，共同完成网页的设计和开发。HTML负责描述网页结构和内容，而CSS则根据HTML的结构和内容去渲染网页的样式和布局。

什么是CSS3？

在CSS的发展历史中，CSS3是最新的规范版本。CSS3在CSS2的基础上增加了一些新的特性，如圆角、阴影、渐变等，这些特性使得网页设计更加丰富多彩。

/* CSS3语法 */
div {
  border-radius: 10px;
  box-shadow: 2px 2px 5px #999;
  background: linear-gradient(to right, #ff0000, #00ffff);
}

CSS3跟CSS2相比，最大的区别就是增加了一些新特性。这些特性使得CSS在网页设计方面更加灵活和多样化。

CSS3与CSS的主要区别

1. 新特性

CSS3在CSS基础上增加了大量新特性，如圆角、阴影、渐变、动画、媒体查询等。这些特性可以实现网页设计中更加细致和炫酷的效果。

/* CSS3动画 */
@keyframes move {
  0% {
    left: 0px;
  }
  100% {
    left: 200px;
  }
}
div {
  position: relative;
  animation: move 2s ease-in-out infinite;
}

2. 兼容性

由于CSS3是最新的规范版本，在一些旧的浏览器中可能不支持部分CSS3特性，导致网页效果不尽如人意。而CSS是老版本规范，几乎所有的浏览器都能够很好的支持。

因此，在网页开发过程中，应该兼顾CSS3的新特性和CSS的兼容性，做到良好的用户体验和兼容性。

3. 书写方式

从书写方式上看，CSS3与CSS没有太大的区别。CSS3多了一些新特性，需要使用新的属性进行设置，但是整体书写风格仍然一致。

/* CSS3圆角 */
div {
  border-radius: 10px;
}
/* CSS圆角 */
div {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

总结

CSS3是CSS的最新规范版本，比CSS增加了很多新特性，如圆角、阴影、渐变、动画、媒体查询等，使得网页设计更加灵活和多样化。但是，由于CSS3的兼容性问题，我们在网页设计过程中仍需要兼顾新特性和兼容性，做到良好的用户体验和兼容性。