【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%;     } }