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); /* 方向 起始颜色 结束颜色 */
}

5. 旋转（transform: rotate）:

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

6. 缩放（transform: scale）:

div:hover {
  transform: scale(1.5, 1.5); /* 水平方向缩放倍数 垂直方向缩放倍数 */
}

7. 变换原点（transform-origin）:

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

8. 过渡效果（transition）:

div:hover {
  transition: all 0.5s ease-in-out; /* 过渡的属性 完成过渡所需时间 缓动函数 */
}

9. 用户界面样式（user-select）:

p {
  user-select: none; /* 禁止选中文本 */
}

10. 媒体查询（@media）:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这些只是CSS3中众多新增属性的一小部分。实际开发中，根据需求选择合适的属性，并搭配选择器和其他CSS规则使用。