CSS3 有哪些新特性？请列举几个常用的。

CSS3作为CSS技术的重大升级，引入了众多令人兴奋的新特性，使开发者能够创建更丰富、更动态的网页界面，同时减少对JavaScript和图片的依赖。本文将深入解析CSS3的核心新特性，帮助前端开发者全面掌握这些必备知识。

一、选择器增强

CSS3提供了更强大、更精确的选择器，使开发者能够更精准地定位DOM元素。

1. 属性选择器

css 复制代码

/* 匹配具有特定属性的元素 */
input[type="text"] {
  border: 1px solid #ccc;
}

/* 匹配属性值包含特定字符串的元素 */
a[href*="example"] {
  color: red;
}

/* 匹配属性值以特定字符串开头的元素 */
a[href^="https"] {
  color: green;
}

/* 匹配属性值以特定字符串结尾的元素 */
a[href$=".pdf"] {
  background: url(pdf-icon.png) no-repeat;
}

2. 结构伪类选择器

css 复制代码

/* 选择第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 选择最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 选择第n个子元素 */
li:nth-child(3) {
  color: blue;
}

/* 奇数行 */
tr:nth-child(odd) {
  background: #f2f2f2;
}

/* 偶数行 */
tr:nth-child(even) {
  background: #fff;
}

/* 选择特定类型的第n个元素 */
p:nth-of-type(2) {
  font-size: 1.2em;
}

二、盒模型升级

1. box-sizing属性

css 复制代码

/* 传统盒模型：宽度=内容宽度 */
div {
  box-sizing: content-box; /* 默认值 */
  width: 300px;
  padding: 20px; /* 总宽度=300+20+20=340px */
  border: 5px solid black; /* 总宽度=340+5+5=350px */
}

/* 边框盒模型：宽度=内容+内边距+边框 */
div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px; /* 内容宽度=300-20-20-5-5=250px */
  border: 5px solid black; /* 总宽度仍为300px */
}

三、背景与边框增强

1. 多背景图片

css 复制代码

div {
  background: 
    url(top-image.png) top left no-repeat,
    url(middle-image.png) center center no-repeat,
    url(bottom-image.png) bottom left no-repeat;
  background-color: #f8f8f8;
}

2. background-size属性

css 复制代码

div {
  background-image: url(large-image.jpg);
  background-size: cover; /* 覆盖整个元素区域 */
  /* 或 */
  background-size: contain; /* 保持宽高比，完整显示图片 */
  /* 或 */
  background-size: 50% 80%; /* 自定义宽度和高度 */
}

3. 圆角边框(border-radius)

css 复制代码

div {
  /* 四个角相同圆角 */
  border-radius: 10px;
  
  /* 分别设置四个角 */
  border-radius: 10px 15px 20px 25px; /* 左上 右上 右下 左下 */
  
  /* 椭圆圆角 */
  border-radius: 50px / 25px; /* 水平半径 / 垂直半径 */
  
  /* 圆形 */
  border-radius: 50%;
}

4. 盒子阴影(box-shadow)

css 复制代码

div {
  /* 基本阴影 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  /* 参数：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
  
  /* 内阴影 */
  box-shadow: inset 0 0 10px #000;
  
  /* 多重阴影 */
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12), 
    0 1px 2px rgba(0,0,0,0.24);
}

5. 边框图片(border-image)

css 复制代码

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
  /* 参数：图片路径 切片大小 重复方式 */
}

四、色彩与透明度

1. RGBA和HSLA色彩模式

css 复制代码

div {
  /* RGBA: 红,绿,蓝,透明度(0-1) */
  background-color: rgba(255, 0, 0, 0.5);
  
  /* HSLA: 色相(0-360),饱和度(0-100%),亮度(0-100%),透明度(0-1) */
  color: hsla(120, 100%, 50%, 0.3);
}

2. 透明度(opacity)

css 复制代码

div {
  opacity: 0.7; /* 0(完全透明)到1(完全不透明) */
}

五、渐变效果

1. 线性渐变(linear-gradient)

css 复制代码

div {
  /* 简单线性渐变 */
  background: linear-gradient(to right, red, blue);
  
  /* 多色线性渐变 */
  background: linear-gradient(to bottom, red, orange, yellow, green);
  
  /* 角度渐变 */
  background: linear-gradient(45deg, red, blue);
  
  /* 带颜色节点的渐变 */
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

2. 径向渐变(radial-gradient)

css 复制代码

div {
  /* 简单径向渐变 */
  background: radial-gradient(circle, red, blue);
  
  /* 指定形状和位置 */
  background: radial-gradient(ellipse at top, red, transparent),
              radial-gradient(ellipse at bottom, blue, transparent);
}

六、文字效果

1. 文字阴影(text-shadow)

css 复制代码

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
  
  /* 多重文字阴影 */
  text-shadow: 
    1px 1px 1px #000,
    0 0 10px blue,
    0 0 20px darkblue;
}

2. @font-face规则

css 复制代码

/* 定义字体 */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 使用自定义字体 */
body {
  font-family: 'MyWebFont', sans-serif;
}

3. 文字渲染优化

css 复制代码

p {
  text-overflow: ellipsis; /* 文字溢出显示省略号 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  
  /* 或者 */
  word-wrap: break-word; /* 允许长单词换行 */
}

七、2D/3D变换(Transform)

1. 2D变换

css 复制代码

div {
  /* 平移 */
  transform: translate(50px, 100px);
  
  /* 旋转 */
  transform: rotate(30deg);
  
  /* 缩放 */
  transform: scale(1.5, 0.5);
  
  /* 倾斜 */
  transform: skew(20deg, 10deg);
  
  /* 多重变换 */
  transform: translateX(50px) rotate(45deg) scale(1.2);
}

2. 3D变换

css 复制代码

.container {
  perspective: 1000px; /* 设置透视点 */
}

div {
  transform: rotateX(45deg) rotateY(30deg);
  transform-style: preserve-3d; /* 保持3D空间 */
}

八、过渡与动画

1. 过渡(Transition)

css 复制代码

button {
  background: blue;
  transition: background 0.3s ease-in-out, transform 0.5s;
  
  /* 分开定义 */
  transition-property: background, transform;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function: ease-in-out, linear;
  transition-delay: 0s, 0.1s;
}

button:hover {
  background: red;
  transform: scale(1.1);
}

2. 动画(Animation)

css 复制代码

/* 定义关键帧动画 */
@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  
  50% {
    transform: translateX(5%);
  }
  
  to {
    transform: translateX(0);
  }
}

div {
  animation: slidein 3s ease-in-out 1s infinite alternate;
  
  /* 分开定义 */
  animation-name: slidein;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

九、多列布局

css 复制代码

.container {
  column-count: 3; /* 列数 */
  column-gap: 20px; /* 列间距 */
  column-rule: 1px solid #ccc; /* 列间分割线 */
  
  /* 或者指定列宽 */
  column-width: 200px;
}

h2 {
  column-span: all; /* 跨所有列 */
}

十、弹性盒子布局(Flexbox)

css 复制代码

.container {
  display: flex;
  flex-direction: row; /* 主轴方向: row, row-reverse, column, column-reverse */
  flex-wrap: wrap; /* 是否换行: nowrap, wrap, wrap-reverse */
  justify-content: center; /* 主轴对齐: flex-start, flex-end, center, space-between, space-around */
  align-items: stretch; /* 交叉轴对齐: flex-start, flex-end, center, baseline, stretch */
  align-content: space-between; /* 多行对齐 */
}

.item {
  flex: 1; /* 缩写: flex-grow, flex-shrink, flex-basis */
  align-self: center; /* 单个项目对齐方式 */
  order: 1; /* 项目排序 */
}

十一、网格布局(Grid)

css 复制代码

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* 列定义 */
  grid-template-rows: 50px 1fr 30px; /* 行定义 */
  grid-gap: 10px; /* 网格间隙 */
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header; /* 指定区域 */
}

.sidebar {
  grid-column: 1 / 2; /* 列线定位 */
  grid-row: 2 / 3; /* 行线定位 */
}

.content {
  justify-self: center; /* 单元格内水平对齐 */
  align-self: center; /* 单元格内垂直对齐 */
}

十二、响应式设计相关特性

1. 媒体查询(Media Queries)

css 复制代码

/* 基本媒体查询 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 多条件查询 */
@media (min-width: 500px) and (max-width: 1200px) and (orientation: landscape) {
  .sidebar {
    display: none;
  }
}

/* 针对高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url(logo@2x.png);
    background-size: 100px 100px;
  }
}

2. 响应式单位

css 复制代码

div {
  width: 80vw; /* 视口宽度的80% */
  height: 50vh; /* 视口高度的50% */
  font-size: 2rem; /* 根元素字体大小的2倍 */
  padding: 1em; /* 当前字体大小的1倍 */
  margin: 5vmin; /* 视口较小尺寸的5% */
}

十三、滤镜效果(Filter)

css 复制代码

img {
  /* 模糊 */
  filter: blur(5px);
  
  /* 亮度 */
  filter: brightness(150%);
  
  /* 对比度 */
  filter: contrast(200%);
  
  /* 灰度 */
  filter: grayscale(100%);
  
  /* 色相旋转 */
  filter: hue-rotate(90deg);
  
  /* 反转颜色 */
  filter: invert(100%);
  
  /* 透明度 */
  filter: opacity(50%);
  
  /* 饱和度 */
  filter: saturate(200%);
  
  /* 深褐色 */
  filter: sepia(100%);
  
  /* 多重滤镜 */
  filter: contrast(175%) brightness(103%);
  
  /* 动画滤镜效果 */
  transition: filter 0.5s;
}

img:hover {
  filter: grayscale(0%);
}

十四、性能优化与注意事项

硬件加速：使用transform和opacity属性触发GPU加速
css 复制代码
```
.element {
  transform: translateZ(0); /* 触发硬件加速 */
}
```
will-change属性：提前告知浏览器元素可能的变化
css 复制代码
```
.element {
  will-change: transform, opacity;
}
```
避免重排：谨慎使用会影响布局的属性

总结

CSS3提供了丰富的新特性，极大地增强了前端开发的能力和效率。从精确的选择器到复杂的布局系统，从平滑的动画到响应式设计工具，CSS3已经成为现代Web开发不可或缺的一部分。掌握这些特性不仅能够提升开发效率，还能创建出更加美观、交互性更强的用户体验。

在实际开发中，应根据项目需求合理选择CSS3特性，并注意浏览器兼容性问题。通过渐进增强的方式，可以确保网站在不支持某些特性的浏览器中仍能正常工作，同时在支持的浏览器中提供更丰富的体验。

随着Web标准的不断发展，CSS也在持续进化，作为前端开发者，保持学习新技术的能力和热情是至关重要的。

分享

复制链接

微信扫码分享

一、选择器增强

1. 属性选择器

2. 结构伪类选择器

二、盒模型升级

1. box-sizing属性

三、背景与边框增强

1. 多背景图片

2. background-size属性

3. 圆角边框(border-radius)

4. 盒子阴影(box-shadow)

5. 边框图片(border-image)

四、色彩与透明度

1. RGBA和HSLA色彩模式

2. 透明度(opacity)

五、渐变效果

1. 线性渐变(linear-gradient)

2. 径向渐变(radial-gradient)

六、文字效果

1. 文字阴影(text-shadow)

2. @font-face规则

3. 文字渲染优化

七、2D/3D变换(Transform)

1. 2D变换

2. 3D变换

八、过渡与动画

1. 过渡(Transition)

2. 动画(Animation)

九、多列布局

十、弹性盒子布局(Flexbox)

十一、网格布局(Grid)

十二、响应式设计相关特性

1. 媒体查询(Media Queries)

2. 响应式单位

十三、滤镜效果(Filter)

十四、性能优化与注意事项

总结