CSS3 知识点

CSS3是CSS（层叠样式表）的最新版本，于2011年被公布并推出，它包含许多新特性，如阴影、渐变、变换等。

1. 圆角：border-radius属性用于创建圆角。

div {
  border: 2px solid;
  border-radius: 50px; /* 或者可以用百分比 */
}

2. 阴影：box-shadow属性用于添加阴影。

div {
  box-shadow: 10px 10px 5px grey; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

3. 文字阴影：text-shadow属性用于在文字上添加阴影。

p {
  text-shadow: 2px 2px 2px grey;
}

4. 线性渐变：background-image属性与linear-gradient函数一起使用来创建线性渐变。

div {
  background-image: linear-gradient(to right, red , yellow);
}

5. 旋转：transform属性的rotate函数用于旋转元素。

div {
  transform: rotate(45deg); /* 旋转45度 */
}

6. 自定义动画：使用@keyframes创建动画，并使用animation属性应用到元素上。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

7. 多列布局：column-width和column-count属性用于创建多列布局。

div {
  column-width: 100px;
  column-count: 4;
}

8. 用户界面样式：CSS3提供了一些用于更改界面元素默认样式的属性，如resize、outline-offset等。

input {
  resize: none; /* 禁止调整输入字段的大小 */
  outline-offset: -2px; /* 移动轮廓线 */
}

9. 多背景：background-image属性可以接受多个图像值，从而创建多重背景。

div {
  background-image: url(image1.jpg), url(image2.jpg);
}

10. 渐进增强：一些新的CSS3特性可以让老版本的浏览器“逐步”增强体验，而不是一下子跳到全新体验，保障了向后兼容性。

以上是CSS3的一些基本知识点和示例，CSS3还有许多其他的特性和用法，需要开发者在实践中逐渐掌握。