mobile wallpaper 1
mobile wallpaper 2
mobile wallpaper 3
mobile wallpaper 4
mobile wallpaper 5
mobile wallpaper 6
Profile Image of the Author
一只捡星星的熊
想说的话
没什么要说的，只是一个单纯的学习内容记录而已
标签
5680 字
16 分钟
CSS学习
2025-11-15
前端
CSS

简介#

CSS （Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

语法

CSS规则由两个主要的部分构成：选择器，以及声明 h1 {color:bule;}

  • h1 为选择器
  • color 为属性
  • bule 为值

注释 /*这是个注释*/

CSS 基础#

选择器#

CSS 选择器是一种模式匹配规则，用于选中 HTML 中的特定元素，并为这些元素应用样式。

  1. 基础选择器
类型语法示例匹配规则
通配符**所有元素
元素选择器elementp所有 <p> 标签
类选择器.class.btn所有 class="btn" 的元素
ID 选择器#id#headerid="header" 的元素（唯一）

2.组合选择器

类型语法示例匹配规则
后代A Bdiv pdiv 内部的所有 p（任意层级）
子代A > Bdiv > pdiv 的直接子元素 p
相邻兄弟A + Bh1 + p紧挨着 h1 后面的 p
通用兄弟A ~ Bh1 ~ ph1 后面所有的 p 兄弟元素
分组A, Bh1, h2所有 h1 和 h2 元素

  1. 属性选择器

    语法示例匹配规则
    [attr][disabled]包含 disabled 属性的元素
    [attr=value][type="text"]属性值完全等于 text
    [attr^=value][href^="https"]属性值以 https 开头
    [attr$=value][src$=".jpg"]属性值以 .jpg 结尾
    [attr*=value][class*="btn"]属性值包含 btn
    [attr~=value][class~="active"]属性值为空格分隔的列表，其中一个是 active

  2. 伪类选择器（状态/位置）

    分类示例说明
    动态伪类:hover、:active、:focus用户交互状态
    结构伪类:first-child、:last-child、:nth-child(n)元素在父元素中的位置
    表单伪类:checked、:disabled、:required表单元素状态
    否定伪类:not(selector)排除某些元素
    目标伪类:targetURL 锚点指向的元素

  3. 伪元素选择器（创建虚拟元素）

语法示例说明
::beforep::before在元素内容前插入虚拟元素
::afterp::after在元素内容后插入虚拟元素
::first-linep::first-line元素的第一行文本
::first-letterp::first-letter元素的第一个字母
::selection::selection用户选中的文本部分

选择器的优先级

当多个选择器选中同一个元素时，优先级决定谁生效：

选择器类型权重示例
内联样式1000style="color: red"
ID 选择器0100#header
类/属性/伪类0010.btn、[type="text"]、:hover
元素/伪元素0001p、::before
通配符/组合器0000*、>、+、~

计算规则：四个位数相加，数值大的优先。

注意： !important > 任何普通规则（无论选择器权重多高）

CSS创建#

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 示例：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。 示例：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

注：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表 示例：

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式 会将表现和内容混杂在一起，不建议使用 使用内联样式，需要在相关的标签内使用样式（style）属性 <p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如： 外部样式表为

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

内部样式表为

h3
{
    text-align:right;
    font-size:20pt;
}

最终样式结果为：即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

color:red;
text-align:right;
font-size:20pt;

多重样式优先级 一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注： 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

CSS 背景#

CSS 背景属性：

Property描述
background简写属性，作用是将背景属性设置在一个声明中
background-attachment背景图像是否固定或者随着页面的其余部分滚动
background-color设置元素的背景颜色
background-image把图像设置为背景
background-position设置背景图像的起始位置
background-repeat设置背景图像是否及如何重复

背景颜色 background-color 属性 颜色定义方式：

  • 十六进制 - 如：“#ff0000”
  • RGB - 如：“rgb(255,0,0)”
  • 颜色名称 - 如：“red”

背景图像 background-image 属性 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

background-repeat; 水平方向平铺 background-repeat; 不平铺 background-position top; 改变图像位置

简写属性 body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS文本#

所有CSS文本属性：

属性描述
color设置文本颜色
direction设置文本方向
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本对齐方式 文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰 text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主要是用来删除链接的下划线

a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换 文本转换属性是用来指定在一个文本中的大写和小写字母。 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进 文本缩进属性是用来指定文本的第一行的缩进。 p {text-indent:50px;}d

CSS字体#

所有CSS字体属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本
font-weight指定字体的粗细

CSS字型

  • 通用字体系列
  • 特定字体系列

font-family 属性设置文本的字体系列。

注意：font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明

示例L: p{font-family:"Times New Roman", Times, serif;}

字体样式 主要是用于指定斜体文字的字体样式属性

  • 正常
  • -斜体
  • 倾斜的文字

字体大小 font-size属性设置 字体大小可以是绝对或者相对大小

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定输出的物理尺寸是绝对大小很有用 相对大小：
  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

设置字体大小 没有设置字体大小是，默认大小和普通文本一样，为 16px=1em

  • 像素设置 h1 {font-size:40px;}

  • em 设置 1em和当前字体大小相等。在浏览器中默认的文字大小是16px h1 {font-size:2.5em;}

  • 使用百分比和 em 组合 设置 <body>元素的默认字体大小的是百分比 body {font-size:100%;}

CSS链接（未完待续）#

SASS 内容#

Sass (Syntactically Awesome Stylesheets，语法增强型样式表) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间，完全兼容所有版本的 CSS， 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性，生成良好格式化的 CSS 代码，易于组织和维护，文件后缀为 .scss。

sass变量#

变量用于存储一些信息，它可以重复使用，使用 $ 符号：$variablename: value; Sass 变量可以存储以下信息：

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

作用域 Sass 变量的作用域只能在当前的层级上有效果 示例：

$myColor: red;


h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}


p {
  color: $myColor;
}

对应的css代码为：

h1 {
  color: green;
}


p {
  color: red;
}

可以使用 !global 关键词设置为全局变量 $myColor: green !global; // 全局作用域

注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

SASS嵌套规则与属性#

示例：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

其中，ul，li和a选择器都嵌套在nav选择器中 对应的css代码如下：：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。 在 Sass 中，我们可以使用嵌套属性来编写它们： 示例：

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}


text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

对应的css代码如下：

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;


text-align: center;
text-transform: lowercase;
text-overflow: hidden;

@import 和 Partials#

@import

@import 指令可以让我们导入其他文件等内容。

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

语法：@import filename;

注意：含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。但是，在导入语句中我们不需要添加下划线。

语法：_filename;

注意：请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

SASS @minin 与 @include#

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 @include 指令可以将混入（mixin）引入到文档中。

定义一个mixin 示例： 创建一个名为”import-text”的混入

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

使用minin @include 指令可用于包含一混入： 语法：

selector {
  @include mixin-name;
}

示例：

.danger {
  @include important-text;
  background-color: green;
}

也可以嵌套mixin里面包含mixin：

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

向mixin传入变量

定义可以接收参数的mixin：

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}


.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}


.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

mixin 的参数也可以定义为默认值， 语法：

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

可变参数 有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 … 来设置可变参数。

例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}


.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

转换为css代码如下：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

浏览器前缀使用混入 示例：

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}


.myBox {
  @include transform(rotate(20deg));
}

转换的css如下：

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

SASS @extend 与继承#

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

示例： 创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}


.button-report  {
  @extend .button-basic;
  background-color: red;
}


.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

对应的CSS代码如下

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}


.button-report  {
  background-color: red;
}


.button-submit  {
  background-color: green;
  color: white;
}

SASS 函数#

Sass String(字符串) 函数

Sass String(字符串) 函数用于处理字符串并获取相关信息。

注意：Sass 字符串的起始索引值从 1 开始，记住不是 0。

  • quote(string) 给字符串添加引号
  • str-index(string, substring) 返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null
  • str-insert(string, insert, index) 在字符串 string 中 index 位置插入 insert
  • str-length(string) 返回字符串的长度
  • str-slice(string, start, end) 从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾
  • to-lower-case(string) 将字符串转成小写
  • to-upper-case(string) 将字符串转成大写
  • unique-id() 返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
  • unquote(string) 移除字符串的引号

Sass 数字函数

  • abs(number) 返回一个数值的绝对值
  • ceil(number) 向上取整
  • comparable(num1, num2) 返回一个布尔值，判断 num1 与 num2 是否可以进行比较
  • floor(number) 向下取整
  • max(number…) 返回最大值
  • min(number…) 返回最小值
  • percentage(number) 将数字转化为百分比的表达形式。
  • random() 返回 0-1 区间内的小数
  • random(number) 返回 1 至 number 之间的整数，包括 1 和 limit
  • round(number) 返回最接近该数的一个整数，四舍五入

Sass 列表(List)函数

Sass 列表(List)函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。 Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。

注意： 列表的起始索引值为 1，记住不是 0。

  • append(list, value, [separator]) 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。
  • index(list, value) 返回元素 value 在列表中的索引位置。
  • is-bracketed(list) 判断列表中是否有中括号
  • join(list1, list2, [separator, bracketed]) 合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。
  • length(list) 返回列表的长度
  • list-separator(list) 返回一列表的分隔符类型。可以是空格或逗号。
  • nth(list, n) 获取第 n 项的值。
  • set-nth(list, n, value) 设置列表第 n 项的值为 value。
  • zip(lists) 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。

Sass Map(映射)函数 Sass Map(映射)对象是以一对或多对的 key/value 来表示。 Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。

  • map-get(map, key) 返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
  • map-has-key(map, key) 判断 map 是否有对应的 key，存在返回 true，否则返回 false。
  • map-keys(map) 返回 map 中所有的 key 组成的队列。
  • map-merge(map1, map2) 合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
  • map-remove(map, keys…) 移除 map 中的 keys，多个 key 使用逗号隔开。
  • map-values(map) 返回 map 中所有的 value 并生成一个队列。

Sass 选择器函数

  • is-superselector(super, sub) 比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。
  • selector-append(selectors) 将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.
  • selector-extend(selector, extendee, extender)
  • selector-nest(selectors) 返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。
  • selector-parse(selector) 将字符串的选择符 selector 转换成选择器队列。
  • selector-replace(selector, original, replacement) 给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列。
  • selector-unify(selector1, selector2) 将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值。
  • simple-selectors(selectors) 将合成选择器拆为单个选择器。

Sass Introspection 函数（内省函数） Sass Introspection 函数比较少用于构建样式表，一般用于代码的调试上。

  • call(function, arguments…) 函数的动态调用，即调用函数 function 参数为 arguments，并返回结果。
  • content-exists() 查看当前的混入是否传递 @content 块。
  • feature-exists(feature) 检查当前的 Sass 实现是否支持该特性。
  • function-exists(functionname) 检测指定的函数是否存在
  • get-function(functionname, css: false) 返回指定函数。如果 css 为 true，则返回纯 CSS 函数。
  • global-variable-exists(variablename) 检测某个全局变量是否定义。
  • inspect(value) 返回一个字符串的表示形式，value 是一个 sass 表达式。
  • mixin-exists(mixinname) 检测指定混入 (mixinname) 是否存在
  • type-of(value) 返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。
  • unit(number) 返回传入数字的单位（或复合单位）。
  • unitless(number) 返回一个布尔值，判断传入的数字是否带有单位。
  • variable-exists(variablename) 判断变量是否在当前的作用域下。

Sass 颜色函数 Sass 颜色函数可以分为三个部分：颜色设置、颜色获取以及颜色操作

颜色设置

  • rgb(red, green, blue) 创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色，而 G 是 “green” 绿色，B 是 “blue” 蓝色。
  • rgba(red, green, blue, alpha) 根据红、绿、蓝和透明度值创建一个颜色。
  • hsl(hue, saturation, lightness) 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
  • hsla(hue, saturation, lightness, alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
  • grayscale(color) 将一个颜色变成灰色，相当于 desaturate( color,100%)。
  • complement(color) 返回一个补充色，相当于adjust-hue($color,180deg)
  • invert(color, weight) 返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

sass 颜色获取

  • red(color) 从一个颜色中获取其中红色值（0-255）
  • green(color) 从一个颜色中获取其中绿色值（0-255）
  • blue(color) 从一个颜色中获取其中蓝色值（0-255）。
  • hue(color) 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)
  • saturation(color) 获取一个颜色的饱和度值(0% - 100%)
  • lightness(color) 获取一个颜色的亮度值(0% - 100%)
  • alpha(color) Returns the alpha channel of color as a number between 0 and 1.
  • opacity(color) 获取颜色透明度值(0-1)。

Sass 颜色操作

  • mix(color1, color2, weight) 把两种颜色混合起来。 weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
  • adjust-hue(color, degrees) 通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。
  • adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) 这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。
  • change-color(color, red, green, blue, hue, saturation, lightness, alpha) 跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。
  • scale-color(color, red, green, blue, saturation, lightness, alpha) 另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。
  • rgba(color, alpha) 根据红、绿、蓝和透明度值创建一个颜色。
  • lighten(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
  • darken(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
  • saturate(color, amount) 提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
  • desaturate(color, amount) 调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
  • opacify(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
  • fade-in(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
  • transparentize(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
  • fade-out(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
分享

如果这篇文章对你有帮助，欢迎分享给更多人！

CSS学习
https://niushaoxiong.top/posts/css/
作者
一只捡星星的熊
发布于
2025-11-15
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

cmake文件配置
HTML学习
相关文章 智能推荐
1
HTML学习
前端 HTML 学习笔记，整理网页结构、常用标签、文档组成、表单、多媒体和基础开发要点。
2
Langchain学习
AI LangChain 学习笔记，整理模型接口、提示词、输出解析、链式调用、记忆和工具集成。
3
Android 学习
Android Android 学习笔记，整理系统概念、项目结构、组件、开发工具和移动应用开发基础。
4
工作流引擎学习
工作流 工作流的概念，定义，核心架构和驱动等等
5
DESIGN.md 文档学习（AI总结整理）
UI设计 DESIGN.md 学习笔记，整理设计规范文档的作用、结构、写法、约束内容和 AI 协作方式。
随机文章 随机推荐
1
Spec-kit使用教程
工具 2026-05-13
2
PDDL规划语言
AI 2026-02-27
3
RestFulAPI
架构 2026-03-18
4
Mermaid笔记(AI生成）
其他 2026-06-08
5
Gradle构建工具(AI整理）
构建工具 2026-03-16
© 2026 一只捡星星的熊. All Rights Reserved. / RSS / Atom / Sitemap
Powered by Astro & Mizuki  Version 9.0

目录