CSS3新增的语法

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

1. 圆角（border-radius）

div {
  border: 2px solid #a1a1a1;
  border-radius: 50px; /* 所有角都为50像素的圆角 */
}

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); /* 从左到右的渐变，从红色到黄色 */
}

5. 旋转（transform: rotate）

div:hover {
  transform: rotate(360deg); /* 鼠标悬停时旋转360度 */
  transition: transform 0.5s ease-in-out; /* 变化过渡效果 */
}

6. 自定义动画（animation）

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example; /* 动画名称 */
  animation-duration: 4s; /* 动画时长 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

7. 多列布局（column-count、column-gap）

div {
  column-count: 3; /* 分为3列 */
  column-gap: 10px; /* 列与列之间的间隔 */
}

8. 选择器（:target、:nth-child、:checked）

#section1:target {
  color: blue; /* 当前活动#section1的颜色为蓝色 */
}
 
input:checked + span {
  color: green; /* 选中的input旁边的span颜色为绿色 */
}
 
ul li:nth-child(2) {
  color: red; /* ul中的第二个li的颜色为红色 */
}

这些只是CSS3新特性的一小部分，还有许多其他的特性等待我们去学习和使用。