总结css的知识点和css3的新特性

CSS（级联样式表）是一种用来描述网页和用户界面样式的语言，主要用于设计网页的表现层。CSS3是CSS的一个版本，引入了许多新特性，如阴影、渐变、变换、动画等，以及选择器的增强和布局模块的增加。

CSS3的一些新特性：

1. 选择器（Selector）：提供了更多选择器，如属性选择器、结构伪类选择器等。
2. 阴影和图像效果（Shadow and Image Effects）：提供了box-shadow、text-shadow等属性，用于创建阴影和模糊效果。
3. 边框和背景（Border and Background）：提供了圆角边框（border-radius）、渐变背景（gradient）等。
4. 文字效果（Text Effects）：提供了文字阴影（text-shadow）、字体加载（@font-face）等。
5. 2D/3D转换（Transform）：提供了transform属性，可以进行2D或3D转换。
6. 动画（Animation）：提供了关键帧（@keyframes）和动画（animation）属性，可以创建复杂的动画效果。
7. 多列布局（Multi-column Layout）：提供了多列布局的支持。
8. 用户界面（User Interface）：提供了更多的UI特效，如滚动条样式（scrollbar）。

CSS3的新特性可以用来创建更加丰富和动态的网页设计。

示例代码：

/* 圆角边框 */
div {
  border-radius: 10px;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
div {
  column-count: 3;
}
 
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

以上代码展示了CSS3的几个常用特性：圆角边框、渐变背景、盒子阴影、关键帧动画、多列布局和自定义滚动条样式。这些都是CSS3提供的强大工具，可以用来增强网页的视觉效果。