CSS3 新增属性（边框，背景，文字，颜色属性）

CSS3 中添加了许多新的属性，以下是一些常见的：

1. 边框属性：border-radius（圆角边框）, border-image（边框图片）, box-shadow（盒子阴影）, border-collapse（边框合并）

/* 圆角边框 */
div {
  border: 2px solid black;
  border-radius: 10px; /* 圆角半径 */
}
 
/* 边框图片 */
div {
  border: 8px solid transparent;
  border-image: url(border.png) 30 round; /* 30 是边框图片切片宽度，round 是平铺方式 */
}
 
/* 盒子阴影 */
div {
  box-shadow: 5px 5px 10px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}
 
/* 边框合并 */
table {
  border-collapse: collapse; /* 合并边框 */
}

2. 背景属性：background-size（背景大小）, background-origin（背景起始点）, background-clip（背景裁剪区域）

/* 背景大小 */
div {
  background-image: url(background.jpg);
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 背景起始点 */
div {
  background-image: url(background.jpg);
  background-origin: content-box; /* 背景图片从内容区域开始显示 */
}
 
/* 背景裁剪区域 */
div {
  background-image: url(background.jpg);
  background-clip: content-box; /* 背景图片裁剪到内容区域 */
}

3. 文本属性：text-shadow（文本阴影）, word-wrap（自动换行）, text-overflow（文本溢出时的处理）

/* 文本阴影 */
p {
  text-shadow: 2px 2px 4px #888888; /* 水平偏移 垂直偏移 模糊距离 颜色 */
}
 
/* 自动换行 */
p {
  word-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
}
 
/* 文本溢出处理 */
p {
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
}

4. 颜色属性：rgba（带透明度的颜色）, hsl（根据色相、饱和度、亮度）

/* RGBA颜色 */
div {
  background-color: rgba(255, 0, 0, 0.5); /* 红色半透明 */
}
 
/* HSL颜色 */
div {
  background-color: hsl(120, 100%, 50%); /* 绿色 */
}

CSS3 提供了丰富的新属性，以便我们创建更加生动和复杂的网页设计。上述例子展示了一些常用的CSS3属性及其使用方法。