CSS3新增属性

CSS3 新增了许多属性，以下是一些常见的 CSS3 新增属性及其用法的简单示例：

1. 圆角（border-radius）:

div {
  border: 2px solid #a1a1a1;
  border-radius: 25px; /* 圆角的半径 */
}

2. 阴影（box-shadow）:

div {
  box-shadow: 10px 10px 5px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

3. 文字阴影（text-shadow）:

p {
  text-shadow: 2px 2px 2px #888888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

4. 线性渐变（linear-gradient）:

div {
  background: linear-gradient(to right, red , yellow); /* 方向 颜色1 颜色2 */
}

5. 旋转（transform: rotate）:

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

6. 转换原点（transform-origin）:

div {
  transform-origin: bottom left; /* 转换的原点位置 */
}

7. 旋转轴点（transform-origin）:

div {
  perspective-origin: bottom left; /* 视觉的原点位置 */
}

8. 过渡效果（transition）:

div {
  transition: width 2s, height 2s, transform 2s; /* 过渡的属性 持续时间 */
}

9. 自定义动画（@keyframes）:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example; /* 使用 @keyframes 动画名称 */
  animation-duration: 4s; /* 动画时长 */
}

10. 多列布局（column-width/column-gap）:

div {
  column-width: 100px; /* 列宽 */
  column-gap: 10px; /* 列间隙 */
}

这些只是 CSS3 新增属性的一小部分，CSS3 还包含了许多其他的特性，如伪元素（::before, ::after）、媒体查询（@media）、字体图标（@font-face）等。