CSS3新特性

好哈优学编程

已于 2024-08-29 22:58:55 修改

阅读量307

点赞数 6

文章标签：前端 css html

于 2024-08-29 22:55:02 首次发布

本文链接：https://blog.csdn.net/m0_56131422/article/details/141689511

版权

CSS3 引入了许多新特性，使得前端开发者能够创建更加丰富和交互性强的网页。以下是一些主要的新特性：

1. 选择器：CSS3引入了许多新的选择器，例如属性选择器、结构伪类选择器、否定伪类选择器等，开发者能够更精准地选中需要的元素，如 :nth-child() 和 :not()。
2. 盒模型：引入 box-sizing 属性，使得开发者能够更方便地控制元素的大小。此外，还引入了flex布局（弹性布局）和grid布局（网格布局），大大增强了布局能力。
3. 背景和边框：渐变背景（支持线性渐变linear-gradient和径向渐变radial-gradient）、圆角边框（border-radius）、阴影（box-shadow 和 text-shadow）。

4.2D/3D转换：transform属性（如 rotate()、scale()）。

5. 过渡和动画：transition属性和 animation属性支持过渡和动画效果，使得元素状态的变化能够更加平滑和生动。@keyframes 是 CSS3 中用于定义动画的规则。
6. 字体：自定义字体（@font-face）。
7. 媒体查询：响应式设计的基础（@media），使得开发者能够根据设备的特性（例如屏幕宽度、设备类型等）来应用不同的样式。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 新特性示例</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f5f5f5;
    }

    /* Flexbox 布局 */
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
      background: linear-gradient(135deg, #87ceeb, #ffb6c1); /* 从 #87ceeb 到 #ffb6c1 的渐变效果，角度设置为 135 度 */
    }

    .flex-item {
      background: #ff6347;
      color: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      width: 100px;
      height: 100px;
      transition: transform 0.5s, background-color 0.5s;
    }

    .flex-item:hover {
      transform: scale(1.2);   /* 放大1.2倍 */
      background-color: #ffa07a;
    }

    /* Grid 布局 */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 20px;
      background: #d3d3d3;
    }

    .grid-item {
      background: #fff;
      color: #333;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 20px;
      height: 100px;
      animation: bounce 2s infinite;  /*动画*/
    }

    /*自定义动画*/
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-30px);
      }
      60% {
        transform: translateY(-15px);
      }
    }

    @media (max-width: 600px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>

<!-- Flexbox 布局 -->
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<!-- Grid 布局 -->
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>

</body>
</html>