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

原文地址：https://blog.csdn.net/XiugongHao/article/details/140672957

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！