css3与之前的版本

Administrator 字数: 2789 阅读耗时: 6 分钟 2023/11/24 博客独享热度: 17 评论: 0

CSS3是基于CSS2.1升级的。CSS2.1是在2004年被W3C（万维网联盟）推荐为标准的。CSS3在CSS2.1的基础上，引入了许多新的特性和模块，如圆角（border-radius）、阴影（box-shadow）、渐变（gradient）、动画（animation）、过渡（transition）等，大大增强了CSS的功能，使得网页设计更加丰富和灵活。
CSS3引入了许多新的特性，以下是一些例子：

圆角（border-radius）：CSS3允许你创建圆角边框。
```
.box {
  border-radius: 10px;
}
```
阴影（box-shadow）：CSS3允许你给元素添加阴影。
```
.box {
  box-shadow: 10px 10px 5px grey;
}
```
渐变（gradient）：CSS3允许你创建线性和径向的渐变效果。
```
.box {
  background: linear-gradient(red, yellow);
}
```

动画（animation）：CSS3允许你创建关键帧动画。

@keyframes myAnimation {
  0% {background: red;}
  50% {background: yellow;}
  100% {background: green;}
}

.box {
  animation: myAnimation 5s infinite;
}

过渡（transition）：CSS3允许你创建平滑的过渡效果。
```
.box {
  transition: width 2s;
}

.box:hover {
  width: 200px;
}
```

以上只是CSS3的一部分新特性，实际上CSS3还引入了更多的特性，如媒体查询（media queries）、多背景（multiple backgrounds）、弹性布局（flexbox）、网格布局（grid layout）等，以满足现代Web设计的需求。