CSS3 新增属性（边框，背景，文字，真香

CSS3 中有许多新增的属性，以下是一些常见的：

1. 边框（borders）:

   • border-radius: 创建圆角边框。
   • border-image: 使用图片作为边框。

2. 背景（backgrounds）:

   • background-size: 背景图片的尺寸。
   • background-origin: 背景图片的定位区域。
   • background-clip: 背景的裁剪区域。

3. 文字（text）:

   • text-shadow: 文字阴影。
   • word-wrap: 自动换行。
   • text-overflow: 文字溢出时的处理。

4. 转换（transforms）:

   • transform: 包括旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等功能。

5. 动画（animations）:

   • @keyframes: 定义动画序列。
   • animation: 应用动画到元素上。

6. 伪类（pseudo-classes）和伪元素（pseudo-elements）:

   • :first-child, :last-child, :nth-child() 等用于选择特定元素。
   • ::before, ::after 用于在元素前后添加内容。

7. 用户界面（user interface）:

   • resize: 控制元素是否可调整大小。
   • box-sizing: 控制元素的盒模型的计算方式。

8. 多列（multi-column）:

   • column-count, column-gap, column-rule 等用于多列布局。

9. 过渡（transitions）:

   • transition: 变换属性的过渡效果。

这些是CSS3中的一些常用属性，具体使用时需要根据具体场景来选择。

示例代码：

/* 圆角边框 */
div {
  border: 2px solid #000;
  border-radius: 10px; /* 创建圆角 */
}
 
/* 背景尺寸 */
div {
  background-image: url('image.jpg');
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 文字阴影 */
p {
  color: #333;
  text-shadow: 2px 2px 2px #aaa; /* 文字阴影效果 */
}
 
/* 关键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
/* 应用动画 */
div {
  animation: example 4s infinite;
}
 
/* 伪元素添加内容 */
p::before {
  content: "#";
  color: blue;
}
 
/* 可调整大小的文本框 */
input[type="text"] {
  resize: both;
  overflow: auto;
}
 
/* 多列布局 */
div {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}
 
/* 属性过渡效果 */
div {
  transition: background-color 0.5s ease-in-out;
}