CSS3新增的语法

在CSS3中，新增了许多的特性，包括选择器、伪类、渐变、阴影、变换等等。以下是一些常见的CSS3新增语法的示例：

1. 圆角（border-radius）: 可以用来创建圆形的按钮或者是圆角的框。

.button {
  border-radius: 50px; /* 创建一个圆形的按钮 */
}

2. 阴影（box-shadow）: 可以给元素添加阴影效果。

.box {
  box-shadow: 10px 10px 5px grey; /* 添加阴影 */
}

3. 文字阴影（text-shadow）: 可以给文字添加阴影效果。

.text {
  text-shadow: 2px 2px 2px grey; /* 文字阴影 */
}

4. 线性渐变（linear-gradient）: 可以创建一个由两个或多个指定颜色的直线段过渡的视觉效果。

.gradient-box {
  background: linear-gradient(to right, red , yellow); /* 创建一个渐变背景 */
}

5. 旋转（transform: rotate）: 可以让元素旋转指定的角度。

.rotated-box {
  transform: rotate(45deg); /* 旋转45度 */
}

6. 转换（transform）: 可以包括旋转、缩放、移动以及倾斜等多种操作。

.transformed-box {
  transform: translate(50px,100px) rotate(180deg) scale(1.5); /* 移动、旋转、并缩放 */
}

7. 过渡（transition）: 可以在属性改变时产生动画效果。

.transition-box {
  transition: all 0.5s ease-in-out; /* 所有属性变化都会有动画效果 */
}

8. 自定义动画（@keyframes）: 可以创建自定义的动画效果。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-moz-keyframes example /* Firefox */ {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
@-webkit-keyframes example /* Safari 和 Chrome */ {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
.animated-box {
  animation-name: example; /* 使用动画 */
  animation-duration: 4s; /* 动画时间 */
}

9. 多列（column-count）: 可以将文本内容分割成多列。

.multi-column-text {
  column-count: 3; /* 分成3列 */
}

10. 用户界面（cursor）: 可以改变鼠标悬停在元素上时的光标形状。

.hand-cursor {
  cursor: pointer; /* 将光标改为手形 */
}

这些只是CSS3中一部分的新增语法，实际上CSS3提供了更多强大而灵活的功能，如3D变换、动画、多列布局、媒体查询等，这些都可以用来创建更加丰富和动态的网页界面。