重学前端012 --- 响应式网页设计 CSS变量

CSS 变量 含义

变量声明以两个破折号（-）开头，并被赋予名称和值，例如：–variable-name: value;。

要使用变量，请将变量名放在括号中，并在括号前加上var，如下所示：var（–variable name）。你给变量的任何值都将应用于你使用它的任何属性。

应该将回退值添加到变量中，将其作为使用变量的第二个值，如下所示：var（–variable name，fallback value）。 当变量出现问题时，该属性将使用备用值。

优点： 这是使用变量的主要优点，只需更改变量的值，就可以快速更改样式表中的许多值。

CSS 变量 举例

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #999;  /* 创建变量，这里的变量如果跟使用的没有级联关系，可能失效 */
  --building-color2: #66cc99;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);  /* 使用变量 */
}

.bb2 {
  width: 70%;
  height: 10%;
  background-color: var(--building-color2, green);  /* 使用变量，设置备用值 */
}

CSS 变量 声明

变量通常在：root选择器中声明。这是CSS中最高级别的选择器；将变量放在那里将使它们在任何地方都可用。
将：root选择器添加到样式表的顶部，并将所有变量声明移动到那里。

:root是 CSS 中的一个​​伪类选择器​​，它用于选择文档的根元素。
:root最常见和强大的用途是定义​​全局 CSS 变量（也称为自定义属性）​​，这能极大提升样式表的可维护性和灵活性。

CSS 变量具有作用域。在 :root中定义的是全局变量。你也可以在任何选择器内定义局部变量，局部变量会覆盖同名的全局变量。

变量用途（渐变）

CSS 中的渐变是一种跨元素距离在颜色之间过渡的方法。
应用于 background 属性，语法如下所示：（默认方向是to bottom）

gradient-type(
  color1,
  color2
);

上面示例中，color1 在顶部是实心的，color2 在底部是实心的，并且在它们之间均匀地从一个过渡到下一个。

线性渐变 1

.bb2b {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(  /* 重复线性渐变 */
      var(--building-color2),
      var(--building-color2) 6%,
      var(--window-color2) 6%,
      var(--window-color2) 9%
    );
}

线性渐变 2

.fb1c {
  width: 100%;
  height: 80%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ),
    repeating-linear-gradient(
      var(--building-color4),
      var(--building-color4) 10%,
      var(--window-color4) 10%,
      var(--window-color4) 90%
    )
}

解释上面这段代码

这段 CSS 代码定义了一个元素的背景，这个背景由​​两个重复线性渐变（repeating-linear-gradient）叠加而成​​。解释一下：

整体效果
这两个渐变会按照“画家模型”（Painter’s Model）的原则进行叠加，即​​先定义的渐变图层在下，后定义的渐变图层在上​​。因此，这里的 var(–building-color4) 到 transparent 的渐变先绘制，var(–building-color4) 到 var(–window-color4) 的渐变后绘制并覆盖在它上面。

第一个渐变：创建竖条纹
repeating-linear-gradient( 90deg, /* 渐变角度为90度（从左到右）/
var(–building-color4), / 起始颜色（通常是建筑主体色） /
var(–building-color4) 10%, / 该颜色持续到10%的位置 /
transparent 10%, / 在10%的位置突然变为透明 /
transparent 15% / 透明持续到15%的位置 */ )


• ​​作用​​：这个渐变会​​从左到右创建重复的竖条纹图案​​。
• ​​重复单元​​：每个重复单元的宽度是整个背景宽度的 ​​15%​​。
• 在每个 15% 的单元内：前 ​​10%​​ 的区域是实色的 --building-color4。后 ​​5%​​ (15% -
10%) 的区域是​​透明​​的。 • 因为这个渐变是重复的，所以这个“10%实色 + 5%透明”的模式会一直水平重复下去，形成条纹。

第二个渐变：创建窗户或主墙体
repeating-linear-gradient(
var(–building-color4), > /* 起始颜色（与建筑主体色相同） /
var(–building-color4) 10%, / 该颜色持续到10%的位置（可能是墙体上边缘） /
var(–window-color4) 10%, / 在10%的位置突然变为窗户颜色 /
var(–window-color4) 90% / 窗户颜色持续到90%的位置（可能是墙体下边缘） */ )


• ​​作用​​：这个渐变​​从上到下​​（未指定角度时默认为 to bottom）定义了一个重复的渐变，很可能用于模拟​​建筑立面上的窗户​​或墙体的明暗效果。
• ​​重复单元​​：每个重复单元的高度是整个背景高度的 ​​100%​​ (因为最后一个色标是90%，默认延伸至100%)。
• 在每个 100% 的单元内：
• 最上面 ​​10%​​ 的区域是 --building-color4（可能表示窗户上方的墙体或阴影）。
• 中间 ​​80%​​ (90% - 10%) 的区域是 --window-color4（表示窗户本身）。
• 最下面 ​​10%​​ (100% - 90%) 的区域会由于重复渐变的特性，再次从 --building-color4 开始（可能表示窗户下方的墙体）。

叠加后的视觉效果

1. ​​底层​​：第一个渐变创建了​​水平的透明条纹​​。
2. ​​上层​​：第二个渐变覆盖了整个元素，但它中间 ​​80%​​ 高度的窗户区域 (–window-color4) 是​​半透明或与底层能产生混合效果​​的颜色（这取决于 --window-color4 的实际值）。
3. ​​最终结果​​：在上层渐变窗户区域（–window-color4）覆盖的地方，如果它是半透明的或者与底层颜色混合，我们就能透过它看到底层第一个渐变创建的​​竖条纹​​。而上层渐变顶部和底部不透明的
   –building-color4 区域则会完全遮盖住底层的任何图案。 这种技巧常用来为网页元素添加复杂的纹理和视觉效果。

椭圆渐变

.sky {
  background: radial-gradient(
  circle closest-corner at 15% 15%,
    #ffcf33,
    #ffcf33 20%,
    #ffff66 21%,
    #bbeeff 100%
  );
}

radial-gradient() 函数会创建一系列从中心点向外辐射的同心形状（此处应为默认的椭圆形），颜色根据设定的色标（color-stop）进行过渡 。

其他

子项布局

.fb4b {
  width: 100%;
  height: 89%;
  background-color: var(--building-color1);
  display: flex;
  flex-wrap: wrap;
}

flex-wrap 是 CSS Flexbox 布局中一个用于控制​​子项换行行为​​的属性。