Css3新增属性

CSS3 在布局、背景、边框、文本、效果、2D/3D 转换以及动画等方面增加了许多新的属性。以下是一些常见的 CSS3 新增属性及其简单用法示例：

1. 圆角（border-radius）:

div {
  border: 2px solid #000;
  border-radius: 10px; /* 所有角都有圆角 */
}

2. 阴影（box-shadow）:

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

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

p {
  text-shadow: 2px 2px 4px #000;
}

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

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

5. 旋转（transform: rotate）:

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

6. 缩放（transform: scale）:

div:hover {
  transform: scale(1.5); /* 鼠标悬停时放大1.5倍 */
}

7. 过渡效果（transition）:

div {
  transition: all 0.5s ease-in-out; /* 所有属性变化在0.5秒内平滑过渡 */
}
div:hover {
  transform: rotate(45deg) scale(1.5);
}

8. 用户界面（cursor）:

div {
  cursor: pointer; /* 将鼠标光标变为手指形状 */
}

9. 多列布局（column）:

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

10. 动画（animation）:

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

这些只是 CSS3 新增属性的一小部分，CSS3 还有许多其他的特性和改进，如 3D 转换、阴影DOM（Shadow DOM）、弹性盒（Flexbox）布局等。