面试题：css3新增的特性

面试题：css3新增的特性

CSS3是CSS的一个重要升级，它提供了许多新的特性和功能，如圆角边框、阴影、渐变色、多列布局、媒体查询等。下面详细介绍一些CSS3新增的特性：

1. 圆角边框（border-radius）

通过使用border-radius属性可以很方便地设置矩形元素的圆角，在开发中可以使用这个属性来美化UI元素。

div {
  border-radius: 10px;
}

2. 渐变色（Gradient）

Gradient渐变色是CSS3中非常受欢迎的新特性，能够实现平滑渐变效果，如线性渐变和径向渐变。

background: linear-gradient(to bottom, #0fd850, #f9f047);
background: radial-gradient(ellipse at center, #ffb347 0%, #ffcc33 100%);

3. 盒模型调整（box-sizing）

box-sizing属性用于设置元素的盒子模式（box-sizing），可以在border-box（默认）和content-box之间进行选择。如：

box-sizing: border-box; /* 设置为border-box */

4. 阴影（box-shadow 与 text-shadow）

box-shadow属性可以给元素添加投影效果，而text-shadow则可以给文字添加阴影效果，使得页面元素更加生动。

box-shadow: 2px 2px 2px #888888;
text-shadow: 1px 1px 1px #999999;

5. 多列布局（Multi-columns）

多列布局可以把一个元素的内容分成多个列，支持自动分栏和手动指定栏数，并且每个列之间可以设置差异化的样式。

columns: 100px 3;
column-rule: 1px dotted #0000ff;

6. 窗口适应型布局（Media Queries）

Media Queries能够帮助页面在不同设备上都能正常显示，并且让网站实现响应式设计布局，从而适应不同屏幕尺寸的终端设备。

@media screen and (min-width: 480px) {
  /* styles for devices with screen widths >= 480 pixels */
}

总之，CSS3优化的特性很多，在开发中能够快速提升产品的品质和用户体验，更好地满足前端开发者的需求。