css3新增特性

CSS3是CSS（层叠样式表）的一个版本，它于2011年被广泛应用于网页设计。CSS3包含许多新特性，例如：

1. 选择器（Selector）：更加丰富和灵活，例如属性选择器、结构性伪类选择器等。
2. 背景和边框（Background and Border）：例如圆角（border-radius）、渐变（gradient）、阴影（box-shadow）等。
3. 文字效果（Text Effect）：例如文字阴影（text-shadow）、字体的放大缩小（font-stretch）等。
4. 2D/3D转换（Transform）：例如旋转（rotate）、缩放（scale）、平移（translate）、倾斜（skew）等。
5. 动画（Animation）：通过关键帧（keyframes）控制动画效果。
6. 多列布局（Multi-column Layout）：可以创建多列的文本布局。
7. 用户界面（User Interface）：例如更多的表单样式（radio、checkbox、select）、滚动条样式（scrollbar）等。
8. 多媒体（Media Query）：可以使网页在不同的设备上有不同的表现。

以下是一个简单的示例，展示了如何使用CSS3中的一些特性：

/* 圆角、渐变背景、阴影 */
div {
  background: linear-gradient(to right, red, yellow);
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}
 
/* 文字阴影 */
p {
  text-shadow: 2px 2px 4px #888888;
}
 
/* 2D转换：旋转 */
img {
  transform: rotate(45deg);
}
 
/* 多列布局 */
article {
  column-count: 2;
  column-gap: 20px;
}
 
/* 媒体查询：响应式设计 */
@media (max-width: 600px) {
  div {
    border-radius: 5px;
  }
}

<div>This is a div with CSS3 features.</div>
<p>This is a paragraph with CSS3 text effect.</p>
<img src="image.jpg" alt="Rotated Image">
<article>
  <p>This is an article with multi-column layout.</p>
</article>

这个示例展示了如何使用CSS3的一些特性来增强网页的视觉效果和响应式布局。