CSS3 新增属性（边框，背景，web前端自学

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

1. border-radius: 用于创建圆角。
2. box-shadow: 用于添加阴影。
3. border-image: 用于设置边框图片。
4. background-size: 用于调整背景图片的大小。
5. background-origin: 用于设置背景图片的定位区域。
6. transform: 用于应用2D或3D转换。
7. transition: 用于创建过渡效果。
8. animation: 用于创建复杂的动画。
9. text-shadow: 用于在文本上添加阴影。
10. rgba() 和 hsla(): 用于设置颜色和透明度。

示例代码：

/* 圆角 */
div {
  border-radius: 10px;
}
 
/* 阴影 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 背景图片 */
div {
  background-image: url('image.jpg');
  background-size: cover;
  background-origin: border-box;
}
 
/* 2D转换 */
div {
  transform: translate(50px, 100px) rotate(45deg);
}
 
/* 过渡效果 */
div {
  transition: all 0.3s ease-in-out;
}
 
/* 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  animation: example 5s infinite;
}
 
/* 文本阴影 */
p {
  text-shadow: 2px 2px 4px #888888;
}
 
/* 颜色透明度 */
p {
  color: rgba(255, 0, 0, 0.5);
}

这些新属性和方法可以极大地增强网页设计的视觉效果和交互体验。