【温故而知新】CSS3新增了那些新特性及案例代码

概念

CSS3引入了许多新的特性概念，一些常见的特性概念：

1. 弹性盒模型（Flexbox）：一种用于布局的新模型，可以轻松创建灵活的布局，包括水平和垂直居中、自适应宽度等。

2. 网格布局（Grid）：一种更强大的布局系统，可以创建复杂的网格布局，包括自动调整、间距控制、响应式布局等。

3. 媒体查询（Media Queries）：用于根据设备屏幕大小和其他特性来修改样式，从而实现响应式设计。

4. 2D 变换（2D Transforms）：通过改变元素的旋转、缩放、倾斜和位移来实现元素的动态变化。

5. 过渡（Transition）：允许在元素的属性值发生变化时以平滑的方式进行过渡效果。

6. 动画（Animation）：使用关键帧（Keyframes）和动画属性来创建复杂的动画效果。

7. 渐变（Gradients）：允许在元素的背景中创建平滑的颜色过渡效果。

8. 边框圆角（Border-radius）：使元素的边框可以设置为圆角。

9. 文字阴影（Text Shadow）：在文本上创建阴影效果。

10. 在页面中使用字体（@font-face）：允许使用自定义字体文件来渲染文本。

案例

1. 弹性盒模型（Flexbox）

   • 使用新的弹性盒布局来实现灵活的页面布局
   • 示例代码：

     .container {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
     }
     
     .item {
       flex: 1;
     }
     

2. 渐变（Gradients）

   • 可以使用线性渐变或径向渐变来创建平滑过渡的背景效果
   • 示例代码：

     .box {
       background: linear-gradient(to right, #ff0000, #ffff00);
     }
     
     .circle {
       background: radial-gradient(#ff0000, #ffff00);
     }
     

3. 过渡（Transitions）

   • 可以实现元素在不同状态之间平滑过渡的效果
   • 示例代码：

     .box {
       width: 100px;
       height: 100px;
       background: red;
       transition: width 1s;
     }
     
     .box:hover {
       width: 200px;
     }
     

4. 动画（Animations）

   • 可以创建复杂的动画效果，定义动画的关键帧和持续时间
   • 示例代码：

     @keyframes slide {
       0% {
         transform: translateX(0);
       }
       100% {
         transform: translateX(200px);
       }
     }
     
     .box {
       animation: slide 2s infinite alternate;
     }
     

5. 2D和3D转换（Transforms）

   • 可以对元素进行平移、旋转、缩放等变换操作
   • 示例代码：

     .box {
       transform: translate(100px, 100px) rotate(45deg) scale(1.5);
     }
     

6. 边框圆角（border-radius）：

   .box {
     border-radius: 10px;
   }
   

7. 阴影（box-shadow）：

   .box {
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
   

8. 渐变背景（linear-gradient）：

   .box {
     background: linear-gradient(to right, #ff0000, #00ff00);
   }
   

9. 动画效果（@keyframes）：

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

10. 媒体查询（@media）：

@media screen and (max-width: 600px) {
  .box {
    width: 100%;
  }
}

相关文章

【温故而知新】HTML回流和重绘
【温故而知新】Canvas详解及常见问题
【温故而知新】CSS预编语言
【温故而知新】CSS提高性能的方法都有那些
CSS的Grid布局与Flex布局

有疑问，请留言，或者进入社区一起谈论日常开发中，遇到的问题
扫码加入社区【猿区】