【CSS】CSS3 新特性

1. 选择器增强

CSS3 引入了更多的选择器，如属性选择器、伪类选择器等。

• 属性选择器：允许你根据元素的属性或属性值来选择元素。

  input[type="text"] {border: 1px solid #ccc;
  }
  

• 伪类选择器：如 :nth-child() 和 :last-child 等，提供了更丰富的选择能力。

  li:nth-child(2) {font-weight: bold;
  }
  

2. 圆角（Border-radius）

border-radius 属性可以用来创建圆角边框。

.box {border-radius: 10px;
}

3. 阴影和反射（Box-shadow 和 Text-shadow）

box-shadow 和 text-shadow 属性允许在元素上添加阴影效果。

.box {box-shadow: 5px 5px 5px #888888;
}.text {text-shadow: 2px 2px 2px #ccc;
}

5. 背景和边框的渐变（Linear-gradient 和 Radial-gradient）

CSS3 允许通过 linear-gradient 和 radial-gradient 创建渐变背景。

.gradient-background {background: linear-gradient(to right, #ff7e5f, #feb47b);
}.circle-gradient {background: radial-gradient(circle, #ff7e5f, #feb47b);
}

6. 弹性盒子（Flexbox）

Flexbox 提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。

.flex-container {display: flex;justify-content: space-between;align-items: center;
}

7. 网格布局（Grid Layout）

CSS Grid Layout 是一种二维布局系统，允许你在水平和垂直方向上创建复杂的布局。

.grid-container {display: grid;grid-template-columns: auto 1fr auto;grid-template-rows: 100px 200px;
}

8. 转换（Transforms）

transform 属性允许你对元素进行旋转、缩放、倾斜或移动。

.rotated-element {transform: rotate(45deg);
}

9. 过渡（Transitions）

CSS3 过渡效果允许你平滑地在两个属性值之间进行动画过渡。

.button {transition: background-color 0.5s ease;
}.button:hover {background-color: #39f;
}

10. 动画（Animations）

CSS3 动画允许你创建复杂的动画效果，而无需使用 JavaScript。

@keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}
}.slidein-element {animation: slidein 5s;
}

11. 媒体查询（Media Queries）

CSS3 增强了媒体查询的能力，允许你根据多种设备特性来应用样式。

@media screen and (min-width: 600px) {.container {width: 50%;}
}