MONON98's Blog

Appearance

CSS高级特性 ​

1. 请简述CSS中的渐变效果 ​

Details

CSS中的渐变效果（Gradients）是一种创建平滑颜色过渡的技术，它允许开发者在元素的背景中创建从一种颜色到另一种颜色的渐变效果，而不需要使用图片。

渐变类型 ​

CSS支持两种主要的渐变类型：

  1. 线性渐变（Linear Gradients）：沿着一条直线创建颜色过渡
  2. 径向渐变（Radial Gradients）：从一个中心点向外创建颜色过渡

线性渐变 ​

基本语法 ​

css
background: linear-gradient(direction, color-stop1, color-stop2, ...);

方向参数 ​

  • 角度：使用度数指定方向，如 45deg
  • 关键词：
    • to top：从下到上
    • to right：从左到右
    • to bottom：从上到下（默认）
    • to left：从右到左
    • to top right：从左下到右上
    • to bottom right：从左上到右下
    • to top left：从右下到左上
    • to bottom left：从右上到左下

示例 ​

css
/* 从左到右的线性渐变 */
.gradient1 {
  background: linear-gradient(to right, red, blue);
}

/* 45度角的线性渐变 */
.gradient2 {
  background: linear-gradient(45deg, red, blue);
}

/* 带有多个颜色 stop 的线性渐变 */
.gradient3 {
  background: linear-gradient(to right, red, yellow, green, blue);
}

/* 带有颜色位置的线性渐变 */
.gradient4 {
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
}

径向渐变 ​

基本语法 ​

css
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

参数说明 ​

  • shape：渐变的形状，可选值为 circle（圆形）或 ellipse（椭圆形，默认）
  • size：渐变的大小，可选值为 closest-side、farthest-side、closest-corner、farthest-corner（默认）
  • position：渐变的中心点位置，默认为 center

示例 ​

css
/* 默认的径向渐变 */
.gradient5 {
  background: radial-gradient(red, blue);
}

/* 圆形径向渐变 */
.gradient6 {
  background: radial-gradient(circle, red, blue);
}

/* 带有位置的径向渐变 */
.gradient7 {
  background: radial-gradient(circle at top left, red, blue);
}

/* 带有多个颜色 stop 的径向渐变 */
.gradient8 {
  background: radial-gradient(red, yellow, green, blue);
}

重复渐变 ​

CSS还支持重复渐变，使用 repeating-linear-gradient 和 repeating-radial-gradient 函数：

css
/* 重复线性渐变 */
.repeating-linear {
  background: repeating-linear-gradient(to right, red, blue 10%, red 20%);
}

/* 重复径向渐变 */
.repeating-radial {
  background: repeating-radial-gradient(circle, red, blue 10%, red 20%);
}

渐变的应用 ​

  1. 背景：为元素创建渐变背景
  2. 按钮：创建带有渐变效果的按钮
  3. 卡片：为卡片添加渐变阴影效果
  4. 文本：使用 -webkit-background-clip: text 创建渐变文本

示例代码 ​

css
/* 渐变按钮 */
.btn-gradient {
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

/* 渐变卡片 */
.card-gradient {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 渐变文本 */
.text-gradient {
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: bold;
}

总结 ​

CSS渐变是一种强大的工具，它允许开发者创建平滑的颜色过渡效果，而不需要使用图片。通过线性渐变和径向渐变，可以实现各种视觉效果，如渐变背景、按钮、卡片和文本效果等。合理使用渐变可以增强页面的视觉吸引力，提升用户体验。

2. CSS动画 ​

Details

CSS动画是CSS3中引入的一种特性，用于创建元素的动态效果，无需使用JavaScript即可实现平滑的动画过渡。

CSS动画的类型 ​

  1. transition（过渡）：用于实现元素从一种状态到另一种状态的平滑过渡。
  2. animation（动画）：用于创建更复杂的动画效果，支持关键帧定义。

transition（过渡） ​

基本语法 ​

css
.element {
  transition: property duration timing-function delay;
}
  • property：要过渡的CSS属性，如 width、height、background-color 等。
  • duration：过渡持续时间，如 1s、500ms 等。
  • timing-function：过渡的时间函数，如 ease、linear、ease-in、ease-out、ease-in-out 等。
  • delay：过渡开始前的延迟时间，如 0s、100ms 等。

示例 ​

css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease, background-color 1s ease;
}

.box:hover {
  width: 200px;
  background-color: blue;
}

animation（动画） ​

基本语法 ​

css
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

/* 定义关键帧 */
@keyframes name {
  from {
    /* 起始状态 */
  }
  to {
    /* 结束状态 */
  }
}

/* 或使用百分比定义多个关键帧 */
@keyframes name {
  0% {
    /* 起始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}
  • name：动画名称，对应 @keyframes 定义的名称。
  • duration：动画持续时间。
  • timing-function：动画的时间函数。
  • delay：动画开始前的延迟时间。
  • iteration-count：动画重复次数，如 1、infinite 等。
  • direction：动画方向，如 normal、reverse、alternate、alternate-reverse 等。
  • fill-mode：动画结束后的状态，如 none、forwards、backwards、both 等。
  • play-state：动画播放状态，如 running、paused 等。

示例 ​

css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s ease-in-out infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

CSS动画的性能优化 ​

  1. 使用 transform 和 opacity：这两个属性的动画不会触发重排（reflow），性能更好。
  2. 避免使用 position: absolute：绝对定位的元素动画可能会触发重排。
  3. 使用 will-change：告诉浏览器元素即将发生变化，提前做好优化准备。
  4. 合理使用 animation-fill-mode：避免不必要的动画状态重置。
  5. 控制动画复杂度：过于复杂的动画可能会影响性能。

浏览器兼容性 ​

CSS3动画在现代浏览器中得到了良好的支持，但在旧版浏览器（如IE9及以下）中不支持。可以使用JavaScript库（如jQuery）作为回退方案。

3. CSS过渡 ​

Details

CSS过渡（Transition）是CSS3中引入的一种特性，用于实现元素从一种状态到另一种状态的平滑过渡效果。

基本语法 ​

css
.element {
  transition: property duration timing-function delay;
}
  • property：要过渡的CSS属性，如 width、height、background-color 等，使用 all 表示所有可过渡属性。
  • duration：过渡持续时间，如 1s、500ms 等。
  • timing-function：过渡的时间函数，控制过渡的速度变化。
  • delay：过渡开始前的延迟时间，如 0s、100ms 等。

时间函数 ​

常见的时间函数包括：

  • ease：默认值，开始和结束时较慢，中间较快。
  • linear：匀速过渡。
  • ease-in：开始时较慢。
  • ease-out：结束时较慢。
  • ease-in-out：开始和结束时都较慢。
  • cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。

可过渡的属性 ​

并非所有CSS属性都可以过渡，常见的可过渡属性包括：

  • 颜色相关：color、background-color、border-color 等。
  • 尺寸相关：width、height、padding、margin 等。
  • 位置相关：top、left、right、bottom 等。
  • 变换相关：transform。
  • 其他：opacity、border-radius、box-shadow 等。

示例代码 ​

css
/* 基本过渡效果 */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

/* 多属性过渡 */
.card {
  width: 200px;
  height: 200px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 自定义过渡时间函数 */
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.element:hover {
  width: 300px;
}

过渡的触发方式 ​

过渡通常通过以下方式触发：

  1. 伪类：如 :hover、:focus、:active 等。
  2. JavaScript：通过修改元素的样式属性。
  3. 媒体查询：当媒体查询条件变化时。

浏览器兼容性 ​

CSS过渡在现代浏览器中得到了良好的支持，包括 Chrome、Firefox、Safari、Edge 等。在 IE10+ 中也有支持。

性能优化 ​

  1. 只过渡必要的属性：避免使用 all 关键字，只过渡需要变化的属性。
  2. 使用 transform 和 opacity：这两个属性的过渡性能更好，不会触发重排。
  3. 合理设置过渡时间：过渡时间不宜过长，一般在 0.3s-0.5s 之间。

4. CSS变换组合 ​

Details

CSS变换（Transform）是CSS3中引入的一种特性，用于对元素进行旋转、缩放、平移、倾斜等操作。变换组合是指同时应用多个变换效果。

基本语法 ​

css
.element {
  transform: transform-function1() transform-function2() ...;
}

常用的变换函数 ​

  1. translate()：平移元素

    • translateX(x)：水平方向平移
    • translateY(y)：垂直方向平移
    • translate(x, y)：同时在水平和垂直方向平移

  2. rotate()：旋转元素

    • rotate(angle)：按指定角度旋转元素

  3. scale()：缩放元素

    • scaleX(x)：水平方向缩放
    • scaleY(y)：垂直方向缩放
    • scale(x, y)：同时在水平和垂直方向缩放

  4. skew()：倾斜元素

    • skewX(angle)：水平方向倾斜
    • skewY(angle)：垂直方向倾斜
    • skew(x-angle, y-angle)：同时在水平和垂直方向倾斜

  5. matrix()：使用矩阵变换

变换组合示例 ​

css
/* 同时应用平移、旋转和缩放 */
.element {
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

/* 变换顺序的影响 */
/* 先旋转后平移 */
.element1 {
  transform: rotate(45deg) translate(100px, 0);
}

/* 先平移后旋转 */
.element2 {
  transform: translate(100px, 0) rotate(45deg);
}

变换原点 ​

transform-origin 属性用于设置变换的原点，默认值为 center（元素的中心）。

css
.element {
  transform-origin: top left; /* 以左上角为变换原点 */
  transform: rotate(45deg);
}

3D变换 ​

CSS3还支持3D变换，常用的3D变换函数包括：

  • translate3d(x, y, z)：3D平移
  • rotate3d(x, y, z, angle)：3D旋转
  • scale3d(x, y, z)：3D缩放
  • perspective(n)：设置透视效果
css
.element {
  transform: perspective(1000px) rotateY(45deg);
}

示例代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS变换组合示例</title>
  <style>
    .container {
      display: flex;
      gap: 50px;
      padding: 50px;
    }
    
    .box {
      width: 100px;
      height: 100px;
      background-color: #007bff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }
    
    .box:hover {
      transform: translate(20px, -20px) rotate(15deg) scale(1.2);
    }
    
    .box2 {
      width: 100px;
      height: 100px;
      background-color: #dc3545;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: top left;
      transition: transform 0.3s ease;
    }
    
    .box2:hover {
      transform: rotate(45deg) scale(1.5);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">变换组合</div>
    <div class="box2">变换原点</div>
  </div>
</body>
</html>

性能优化 ​

  1. 使用硬件加速：变换操作会触发硬件加速，提高性能。
  2. 避免频繁变换：频繁的变换操作可能会影响性能。
  3. 合理使用 transform-origin：设置合适的变换原点可以获得更好的视觉效果。

5. CSS形状 ​

Details

CSS形状（Shape）是CSS中用于控制元素形状和布局的特性，特别是用于实现非矩形的布局效果。

基本形状属性 ​

  1. border-radius：创建圆角

    • 语法：border-radius: length|% [length|%]? / length|% [length|%]?
    • 示例：border-radius: 10px、border-radius: 50%（创建圆形）

  2. clip-path：裁剪元素为指定形状

    • 语法：clip-path: <basic-shape> | <geometry-box> | none
    • 基本形状：circle()、ellipse()、polygon()、inset()

  3. shape-outside：控制文本环绕的形状

    • 语法：shape-outside: <basic-shape> | <image> | none

常用的形状函数 ​

  1. circle()：创建圆形

    • 语法：circle(radius at position)
    • 示例：circle(50px at 50% 50%)

  2. ellipse()：创建椭圆形

    • 语法：ellipse(radius-x radius-y at position)
    • 示例：ellipse(50px 30px at 50% 50%)

  3. polygon()：创建多边形

    • 语法：polygon(x1 y1, x2 y2, ..., xn yn)
    • 示例：polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)（创建菱形）

  4. inset()：创建矩形（带有圆角）

    • 语法：inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
    • 示例：inset(10px 20px 30px 40px round 5px)

示例代码 ​

css
/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  border-radius: 50%;
}

/* 圆角矩形 */
.rounded {
  width: 200px;
  height: 100px;
  background-color: #dc3545;
  border-radius: 20px;
}

/* 多边形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #28a745;
}

/* 使用 clip-path 创建形状 */
.star {
  width: 100px;
  height: 100px;
  background-color: #ffc107;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 使用 shape-outside 实现文本环绕 */
.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: #17a2b8;
  shape-outside: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  margin: 20px;
}

应用场景 ​

  1. 特殊形状的按钮和图标：使用 border-radius 和 clip-path 创建各种形状的按钮和图标。
  2. 文本环绕：使用 shape-outside 实现文本环绕不规则形状的效果。
  3. 响应式形状：结合媒体查询，创建在不同屏幕尺寸下的不同形状。
  4. 动画效果：通过动画改变 clip-path 属性，实现形状的动态变化。

浏览器兼容性 ​

  • border-radius：在所有现代浏览器中都得到了良好的支持。
  • clip-path：在现代浏览器中得到了支持，但在IE中不支持。
  • shape-outside：在部分现代浏览器中支持，需要添加浏览器前缀。

示例代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS形状示例</title>
  <style>
    .container {
      width: 400px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: #007bff;
      shape-outside: circle(50% at 50% 50%);
      clip-path: circle(50% at 50% 50%);
      margin: 20px;
    }
    
    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="shape"></div>
    <p>这是一段文本，用于演示形状外部的文本环绕效果。当使用 shape-outside 属性时，文本会环绕指定的形状，而不是简单的矩形。这种效果可以使页面布局更加美观和有趣。</p>
    <p>通过调整 shape-outside 的值，可以创建不同的文本环绕效果，例如圆形、椭圆形、多边形等。结合 clip-path 属性，可以使元素本身也呈现出相应的形状。</p>
  </div>
</body>
</html>

6. CSS滚动行为 ​

Details

CSS滚动行为（Scroll Behavior）是CSS中用于控制滚动效果的特性，包括滚动平滑度、滚动捕捉等。

滚动行为属性 ​

  1. scroll-behavior：控制滚动的平滑度

    • 语法：scroll-behavior: auto | smooth
    • auto：默认值，立即滚动到目标位置
    • smooth：平滑滚动到目标位置

  2. scroll-snap-type：控制滚动捕捉的类型

    • 语法：scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
    • none：默认值，不启用滚动捕捉
    • x/y：在水平/垂直方向启用滚动捕捉
    • mandatory：强制滚动捕捉
    • proximity：在接近目标时启用滚动捕捉

  3. scroll-snap-align：控制元素在滚动容器中的对齐方式

    • 语法：scroll-snap-align: [ start | center | end ]{1,2}
    • start：元素的开始边缘与容器对齐
    • center：元素的中心与容器对齐
    • end：元素的结束边缘与容器对齐

  4. scroll-padding：控制滚动容器的内边距

    • 语法：scroll-padding: [ <length> | <percentage> ]{1,4}

  5. scroll-margin：控制滚动元素的外边距

    • 语法：scroll-margin: [ <length> | <percentage> ]{1,4}

平滑滚动示例 ​

css
/* 为整个页面启用平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 为特定容器启用平滑滚动 */
.container {
  scroll-behavior: smooth;
  overflow-y: auto;
  height: 300px;
}

/* 锚点链接 */
a[href^="#"] {
  color: #007bff;
  text-decoration: none;
}

a[href^="#"]:hover {
  text-decoration: underline;
}

滚动捕捉示例 ​

css
/* 垂直滚动捕捉 */
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 300px;
  border: 1px solid #ccc;
}

.scroll-item {
  scroll-snap-align: start;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

/* 水平滚动捕捉 */
.horizontal-scroll {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  white-space: nowrap;
  border: 1px solid #ccc;
}

.horizontal-item {
  scroll-snap-align: center;
  width: 200px;
  height: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  background-color: #f0f0f0;
}

示例代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS滚动行为示例</title>
  <style>
    html {
      scroll-behavior: smooth;
    }
    
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 10px;
    }
    
    nav a {
      margin: 0 10px;
      text-decoration: none;
      color: #333;
    }
    
    section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
    }
    
    #section1 {
      background-color: #f8f9fa;
    }
    
    #section2 {
      background-color: #e9ecef;
    }
    
    #section3 {
      background-color: #dee2e6;
    }
    
    #section4 {
      background-color: #ced4da;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
    <a href="#section4">Section 4</a>
  </nav>
  
  <section id="section1">Section 1</section>
  <section id="section2">Section 2</section>
  <section id="section3">Section 3</section>
  <section id="section4">Section 4</section>
</body>
</html>

应用场景 ​

  1. 单页应用导航：使用平滑滚动实现页面内导航。
  2. 图片画廊：使用滚动捕捉实现图片的快速切换。
  3. 幻灯片：使用滚动捕捉实现幻灯片效果。
  4. 长列表：使用滚动捕捉提高长列表的浏览体验。

浏览器兼容性 ​

  • scroll-behavior：在现代浏览器中得到了支持，但在IE和一些旧版浏览器中不支持。
  • scroll-snap-type 系列属性：在现代浏览器中得到了支持，但在IE中不支持。

性能优化 ​

  1. 合理使用平滑滚动：平滑滚动可能会影响性能，特别是在移动设备上。
  2. 避免过度使用滚动捕捉：过度使用滚动捕捉可能会导致用户体验不佳。
  3. 测试不同设备：在不同设备上测试滚动行为，确保良好的用户体验。

7. 请简述CSS3新特性 ​

Details

CSS3是CSS的第三个主要版本，引入了许多新特性，使CSS更加功能强大和灵活。以下是CSS3的主要新特性：

1. 选择器 ​

  • 属性选择器：如 [attribute^=value]、[attribute$=value]、[attribute*=value] 等。
  • 伪类选择器：如 :nth-child()、:nth-of-type()、:first-of-type、:last-of-type 等。
  • 伪元素选择器：如 ::before、::after、::first-letter、::first-line 等。

2. 边框和背景 ​

  • 边框圆角：border-radius 属性，用于创建圆角边框。
  • 边框阴影：box-shadow 属性，用于为元素添加阴影。
  • 边框图片：border-image 属性，用于使用图片作为边框。
  • 多背景：可以为元素设置多个背景图片。
  • 背景大小：background-size 属性，用于控制背景图片的大小。
  • 背景位置：background-position 属性的扩展，支持更多的位置值。
  • 背景裁剪：background-clip 属性，用于控制背景的裁剪区域。

3. 文本效果 ​

  • 文本阴影：text-shadow 属性，用于为文本添加阴影。
  • 文本溢出：text-overflow 属性，用于控制文本溢出的处理方式。
  • 文本换行：word-wrap 和 word-break 属性，用于控制文本的换行方式。
  • 文本排版：text-align-last、text-justify 等属性，用于控制文本的排版。
  • 字体：@font-face 规则，用于引入自定义字体。

4. 颜色和渐变 ​

  • RGBA颜色：支持带透明度的RGB颜色。
  • HSLA颜色：基于色相、饱和度、亮度和透明度的颜色表示。
  • 线性渐变：linear-gradient() 函数，用于创建线性渐变背景。
  • 径向渐变：radial-gradient() 函数，用于创建径向渐变背景。
  • 重复渐变：repeating-linear-gradient() 和 repeating-radial-gradient() 函数，用于创建重复的渐变效果。

5. 布局 ​

  • Flexbox：弹性盒布局，用于创建一维布局。
  • Grid：网格布局，用于创建二维布局。
  • 多列布局：columns 属性，用于创建多列文本布局。
  • 盒模型：box-sizing 属性，用于控制盒模型的计算方式。
  • 媒体查询：@media 规则，用于根据设备特性应用不同的样式。

6. 动画和过渡 ​

  • 过渡：transition 属性，用于实现元素状态的平滑过渡。
  • 动画：animation 属性和 @keyframes 规则，用于创建复杂的动画效果。
  • 变换：transform 属性，用于对元素进行旋转、缩放、平移等变换。

7. 其他特性 ​

  • 圆角：border-radius 属性。
  • 阴影：box-shadow 和 text-shadow 属性。
  • 透明度：opacity 属性。
  • 滤镜：filter 属性，用于对元素应用各种滤镜效果。
  • 混合模式：mix-blend-mode 属性，用于控制元素的混合模式。
  • 视口单位：vw、vh、vmin、vmax 等单位，用于基于视口大小的布局。
  • calc()函数：用于在CSS中进行计算。

示例代码 ​

css
/* 边框圆角 */
.rounded {
  border-radius: 10px;
}

/* 阴影 */
.shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 渐变 */
.gradient {
  background: linear-gradient(to right, red, blue);
}

/* 变换 */
.transform {
  transform: rotate(45deg) scale(1.2);
}

/* 动画 */
.animated {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 媒体查询 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

浏览器兼容性 ​

CSS3的新特性在现代浏览器中得到了良好的支持，但在旧版浏览器中可能需要使用浏览器前缀（如 -webkit-、-moz-、-o- 等）或回退方案。

8. 请简述CSS变量（CSS Custom Properties） ​

Details

CSS变量（CSS Custom Properties）是CSS3中引入的一种新特性，允许开发者定义和使用可重用的变量，提高CSS代码的可维护性和灵活性。

CSS变量的基本语法 ​

css
/* 定义变量 */
:root {
  --primary-color: blue;
  --font-size: 16px;
  --spacing: 10px;
}

/* 使用变量 */
.container {
  color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

CSS变量的特性 ​

  1. 作用域：CSS变量具有作用域，在定义它们的选择器及其后代中可用。

    • 全局变量：在 :root 伪类中定义，可在整个文档中使用。
    • 局部变量：在特定选择器中定义，只在该选择器及其后代中可用。

  2. 可继承性：CSS变量会被后代元素继承，这使得它们在主题设计中非常有用。

  3. 动态性：CSS变量的值可以通过JavaScript动态修改，这使得它们在交互设计中非常灵活。

  4. 类型：CSS变量可以存储任何CSS值，包括颜色、长度、百分比、字符串等。

CSS变量的优势 ​

  1. 减少重复代码：通过使用变量，可以避免在多个地方重复相同的值。
  2. 易于维护：当需要修改某个值时，只需修改变量的定义，而不需要在多处修改。
  3. 主题切换：通过修改CSS变量的值，可以轻松实现主题切换。
  4. 响应式设计：在媒体查询中修改CSS变量的值，可以实现响应式设计。
  5. 与JavaScript集成：可以通过JavaScript读取和修改CSS变量的值，实现更复杂的交互效果。

CSS变量的使用示例 ​

css
/* 定义主题变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
}

/* 主题切换 */
[data-theme="dark"] {
  --primary-color: #0062cc;
  --secondary-color: #6c757d;
  --success-color: #218838;
  --danger-color: #c82333;
  --light-color: #343a40;
  --dark-color: #f8f9fa;
}

/* 使用变量 */
.btn {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-secondary {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

与JavaScript的集成 ​

javascript
// 读取CSS变量
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color');
console.log(primaryColor); // 输出: #007bff

// 修改CSS变量
document.documentElement.style.setProperty('--primary-color', '#0056b3');

// 主题切换
function toggleTheme() {
  const body = document.body;
  if (body.getAttribute('data-theme') === 'dark') {
    body.removeAttribute('data-theme');
  } else {
    body.setAttribute('data-theme', 'dark');
  }
}

总结 ​

CSS变量是CSS3中一个非常强大的特性，它可以帮助开发者编写更简洁、更可维护的CSS代码。通过使用CSS变量，可以减少重复代码，提高代码的可读性和可维护性，同时还可以实现更灵活的主题切换和响应式设计。

9. 请简述CSS中的层叠上下文（Stacking Context） ​

Details

层叠上下文（Stacking Context）是CSS中一个重要的概念，它决定了元素在页面中的堆叠顺序。理解层叠上下文对于控制元素的显示顺序和解决z-index问题非常重要。

层叠上下文的概念 ​

层叠上下文是一个三维的概念，它定义了元素在z轴上的堆叠顺序。每个层叠上下文都有自己的层叠顺序，内部的元素会按照特定的规则进行堆叠。

如何创建层叠上下文 ​

以下情况会创建层叠上下文：

  1. 根元素：整个文档的根元素（<html>）默认创建一个层叠上下文。

  2. 定位元素：

    • position: absolute 或 position: relative 且 z-index 不为 auto 的元素。
    • position: fixed 或 position: sticky 的元素。

  3. CSS3特性：

    • opacity 小于 1 的元素。
    • transform 不为 none 的元素。
    • filter 不为 none 的元素。
    • backdrop-filter 不为 none 的元素。
    • perspective 不为 none 的元素。
    • isolation: isolate 的元素。
    • mix-blend-mode 不为 normal 的元素。
    • clip-path 不为 none 的元素。

  4. Flex和Grid容器：

    • Flex容器的子元素，如果 z-index 不为 auto。
    • Grid容器的子元素，如果 z-index 不为 auto。

层叠顺序 ​

在一个层叠上下文中，元素的堆叠顺序按照以下规则：

  1. 背景和边框：层叠上下文的背景和边框。
  2. 负z-index：z-index 为负数的子元素。
  3. 块级元素：文档流中的块级元素。
  4. 浮动元素：浮动的元素。
  5. 行内元素：文档流中的行内元素。
  6. z-index: auto：z-index 为 auto 的定位元素。
  7. 正z-index：z-index 为正数的定位元素。

层叠上下文的特性 ​

  1. 独立性：每个层叠上下文都是独立的，内部的元素不会影响外部的元素。
  2. 继承性：子元素会继承父元素的层叠上下文。
  3. z-index的作用域：z-index 只在当前层叠上下文中有效。

层叠上下文的应用 ​

  1. 解决z-index问题：理解层叠上下文可以帮助解决z-index不生效的问题。
  2. 创建隔离环境：通过创建层叠上下文，可以隔离内部元素的堆叠顺序。
  3. 优化性能：合理使用层叠上下文可以减少重绘和重排。

示例代码 ​

css
/* 创建层叠上下文 */
.overlay {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

/* 内部元素的z-index只在当前层叠上下文中有效 */
.overlay .content {
  position: relative;
  z-index: 2; /* 这个z-index只在.overlay的层叠上下文中有效 */
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}

/* 外部元素的z-index */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* 这个z-index在根层叠上下文中有效 */
  background-color: rgba(0, 0, 0, 0.8);
}

总结 ​

层叠上下文是CSS中一个重要的概念，它决定了元素在页面中的堆叠顺序。理解层叠上下文的创建条件和层叠顺序规则，可以帮助开发者更好地控制元素的显示顺序，解决z-index问题，并优化页面性能。

10. calc() 函数 ​

Details

calc() 是CSS3中引入的一个函数，用于在CSS中进行数学计算，它允许开发者在样式规则中使用表达式来计算值。

基本语法 ​

css
property: calc(expression);

支持的运算符 ​

  • +：加法
  • -：减法
  • *：乘法（至少一个操作数必须是数字）
  • /：除法（除数必须是数字）

运算规则 ​

  1. 运算符优先级：遵循数学中的运算符优先级规则。
  2. 空格要求：+ 和 - 运算符两侧必须有空格，* 和 / 运算符两侧可以没有空格。
  3. 单位：可以混合使用不同的单位，如 px、%、em、rem 等。

示例用法 ​

  1. 动态计算宽度：

    css
    .container {
  width: calc(100% - 20px); /* 容器宽度为父容器宽度减去20px */
}

  2. 居中元素：

    css
    .element {
  position: absolute;
  left: calc(50% - 100px); /* 元素左侧距离父容器左侧50%减去元素宽度的一半 */
  top: calc(50% - 50px); /* 元素顶部距离父容器顶部50%减去元素高度的一半 */
  width: 200px;
  height: 100px;
}

  3. 响应式字体大小：

    css
    body {
  font-size: calc(16px + 0.5vw); /* 字体大小为16px加上视口宽度的0.5% */
}

  4. 网格布局：

    css
    .grid {
  display: grid;
  grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc(33.333% - 20px);
  gap: 30px;
}

浏览器兼容性 ​

calc() 函数在现代浏览器中得到了良好的支持，包括 Chrome、Firefox、Safari、Edge 等。在 IE9+ 中也有部分支持，但可能存在一些限制。

注意事项 ​

  1. 性能：calc() 函数在每次重排时都会重新计算，对于复杂的表达式可能会影响性能。

  2. 嵌套：calc() 函数可以嵌套使用，但嵌套层级不宜过深。

  3. 回退方案：为了兼容不支持 calc() 的浏览器，可以提供一个回退值。

    css
    .element {
  width: 90%; /* 回退值 */
  width: calc(100% - 20px); /* 现代浏览器使用 */
}

总结 ​

calc() 函数是CSS中一个强大的工具，它允许开发者在样式规则中进行数学计算，使样式更加灵活和动态。通过合理使用 calc() 函数，可以实现更复杂的布局和响应式设计。

11. viewport 单位 ​

Details

viewport 单位是CSS3中引入的一种相对单位，它们基于视口（viewport）的大小，适用于响应式设计。

常见的 viewport 单位 ​

  • vw：视口宽度的1%。
  • vh：视口高度的1%。
  • vmin：视口宽度和高度中较小值的1%。
  • vmax：视口宽度和高度中较大值的1%。

应用场景 ​

  1. 响应式字体大小：

    css
    h1 {
  font-size: 5vw; /* 字体大小为视口宽度的5% */
}

  2. 全屏布局：

    css
    .full-screen {
  height: 100vh; /* 元素高度为视口高度的100% */
  width: 100vw; /* 元素宽度为视口宽度的100% */
}

  3. 居中元素：

    css
    .centered {
  position: absolute;
  top: 50vh; /* 元素顶部距离视口顶部50% */
  left: 50vw; /* 元素左侧距离视口左侧50% */
  transform: translate(-50%, -50%); /* 调整元素位置，使其真正居中 */
}

  4. 响应式间距：

    css
    .container {
  padding: 2vw; /* 内边距为视口宽度的2% */
}

浏览器兼容性 ​

viewport 单位在现代浏览器中得到了良好的支持，包括 Chrome、Firefox、Safari、Edge 等。在 IE11 中也有部分支持，但 vmax 单位在 IE11 中不被支持。

注意事项 ​

  1. 移动设备的视口：在移动设备上，视口可能会受到缩放和方向变化的影响。

  2. 性能：使用 viewport 单位的元素在视口大小变化时会重新计算，可能会影响性能。

  3. 回退方案：为了兼容不支持 viewport 单位的浏览器，可以提供一个回退值。

    css
    .element {
  font-size: 20px; /* 回退值 */
  font-size: 5vw; /* 现代浏览器使用 */
}

总结 ​

viewport 单位是实现响应式设计的重要工具，它们基于视口的大小，使元素的尺寸和间距能够根据屏幕大小自动调整。通过合理使用 viewport 单位，可以创建更加灵活和适应不同设备的布局。

12. filter 效果 ​

Details

filter 是CSS3中引入的一个属性，用于对元素应用各种视觉效果，如模糊、亮度、对比度、饱和度等。

基本语法 ​

css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia();

常用的 filter 函数 ​

  1. blur()：模糊效果，参数为模糊半径。

    css
    .blur {
  filter: blur(5px);
}

  2. brightness()：亮度调整，参数为亮度值（100% 为原始亮度）。

    css
    .bright {
  filter: brightness(150%);
}

  3. contrast()：对比度调整，参数为对比度值（100% 为原始对比度）。

    css
    .high-contrast {
  filter: contrast(200%);
}

  4. drop-shadow()：添加阴影效果，参数为阴影的水平偏移、垂直偏移、模糊半径和颜色。

    css
    .shadow {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

  5. grayscale()：灰度效果，参数为灰度值（100% 为完全灰度）。

    css
    .grayscale {
  filter: grayscale(100%);
}

  6. hue-rotate()：色相旋转，参数为旋转角度。

    css
    .hue-rotate {
  filter: hue-rotate(90deg);
}

  7. invert()：颜色反转，参数为反转值（100% 为完全反转）。

    css
    .invert {
  filter: invert(100%);
}

  8. opacity()：透明度调整，参数为透明度值（100% 为完全不透明）。

    css
    .transparent {
  filter: opacity(50%);
}

  9. saturate()：饱和度调整，参数为饱和度值（100% 为原始饱和度）。

    css
    .saturated {
  filter: saturate(200%);
}

  10. sepia()： sepia 效果，参数为 sepia 值（100% 为完全 sepia）。

    css
    .sepia {
  filter: sepia(100%);
}

组合使用 ​

可以组合使用多个 filter 函数，它们会按顺序应用。

css
.combined {
  filter: blur(2px) brightness(150%) contrast(120%);
}

应用场景 ​

  1. 图片效果：为图片添加各种视觉效果，如灰度、模糊、色相旋转等。
  2. 按钮交互：为按钮添加 hover 效果，如亮度变化、对比度变化等。
  3. 背景效果：为背景图片添加模糊效果，创建毛玻璃效果。
  4. 文字效果：为文字添加阴影效果，提高可读性。

浏览器兼容性 ​

filter 属性在现代浏览器中得到了良好的支持，包括 Chrome、Firefox、Safari、Edge 等。在 IE 中不被支持。

注意事项 ​

  1. 性能：某些 filter 效果（如 blur）可能会影响性能，特别是在移动设备上。
  2. 布局：filter 效果不会影响元素的布局，只会影响视觉表现。
  3. 继承：filter 属性不会被子元素继承，但子元素会受到父元素 filter 效果的影响。

示例代码 ​

css
/* 毛玻璃效果 */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px); /* 注意：backdrop-filter 与 filter 类似，但只影响背景 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 20px;
}

/* 图片 hover 效果 */
img:hover {
  filter: brightness(120%) contrast(110%);
  transition: filter 0.3s ease;
}

总结 ​

filter 属性是CSS中一个强大的工具，它允许开发者对元素应用各种视觉效果，而不需要使用图片编辑软件。通过合理使用 filter 属性，可以创建更加丰富和吸引人的视觉效果，提升用户体验。

13. sticky 定位 ​

Details

position: sticky 是CSS3中引入的一种定位方式，它结合了 position: relative 和 position: fixed 的特性，使元素在滚动到特定位置时固定下来。

基本语法 ​

css
.element {
  position: sticky;
  top: 0; /* 当元素距离视口顶部0px时开始固定 */
}

工作原理 ​

  1. 初始状态：元素在文档流中的位置与 position: relative 相同。
  2. 滚动触发：当元素滚动到距离指定的偏移值（如 top: 0）时，元素会固定在指定位置，就像 position: fixed 一样。
  3. 父容器限制：元素的固定位置不会超出其父容器的范围，当父容器滚动出视口时，元素也会随之滚动。

应用场景 ​

  1. 导航栏：当页面滚动时，导航栏固定在页面顶部。

    css
    .nav {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
}

  2. 侧边栏：当页面滚动时，侧边栏固定在页面左侧或右侧。

    css
    .sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

  3. 表格表头：当表格内容滚动时，表头固定在表格顶部。

    css
    th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
}

  4. 目录：当页面滚动时，目录固定在页面右侧，方便用户导航。

    css
    .toc {
  position: sticky;
  top: 20px;
  height: fit-content;
}

浏览器兼容性 ​

position: sticky 在现代浏览器中得到了良好的支持，包括 Chrome、Firefox、Safari、Edge 等。在 IE 中不被支持。

注意事项 ​

  1. 父容器限制：sticky 元素的固定位置不会超出其父容器的范围。
  2. z-index：如果 sticky 元素被其他元素覆盖，可以使用 z-index 属性调整堆叠顺序。
  3. 高度：sticky 元素的高度应该是固定的或 fit-content，否则可能会导致布局问题。
  4. 滚动容器：sticky 元素的滚动容器是其最近的具有滚动行为的祖先元素。

示例代码 ​

html
<!-- 导航栏示例 -->
<header class="nav">
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <!-- 主要内容 -->
  <section>
    <h2>内容标题</h2>
    <p>这里是内容...</p>
    <!-- 更多内容 -->
  </section>
</main>
css
.nav {
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  z-index: 100;
}

.nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav a {
  text-decoration: none;
  color: #333;
}

main {
  height: 2000px; /* 为了演示滚动效果 */
  padding: 20px;
}

section {
  margin-bottom: 40px;
}

总结 ​

position: sticky 是一种强大的定位方式，它结合了相对定位和固定定位的特性，使元素在滚动到特定位置时固定下来。通过合理使用 position: sticky，可以创建更加用户友好的界面，如固定导航栏、侧边栏和表格表头等。