前言

本文章将记录自己在工作/学习过程中所遇到的比较冷门、非经常使用的css,以及记录最新的css3属性,便于自己后续查阅学习!

外观属性

这里将整理与布局、外观相关的属性!

column-gap

CSS中用于设置多列布局中列与列之间的间距的属性,当使用CSS的多列布局(column-count或者column-width)时,可以使用column-gap来定义列与列之间的间距,这个属性值也可以在flex布局中使用

clip-path

CSS中用于裁剪元素的属性,它可以通过定义一个裁剪路径来隐藏元素中的部分区域,从而创建非矩形的可见区域,一般有 👇 的几种取值:

  1. url(#id): 引用SVG中定义的裁剪路径;
  2. inset(): 指定一个矩形区域来裁剪元素;
  3. circle(): 创建一个圆形裁剪路径;
  4. ellipse(): 创建一个椭圆形的裁剪路径;
  5. polygon(): 创建一个多边形裁剪路径

background-clip与text-fill-color

background-clip: 用于设置背景图/颜色的绘制区域,通过该属性来控制背景的绘制返回,以便于背景可以限制在元素的哪个区域内显示其取值范围有:border-boxpadding-boxcontent-boxtext
text-fill-color: 用于指定文本的填充颜色,可以用于定义文本的填充颜色,而不影响文本的描边颜色,默认值是auto,代表取color所声明的值,也可以是某个<color>
👇 将结合这两个属性,来实现一个渐变的文本效果,通过对背景设置一个渐变的效果,然后将文本的颜色给设置为透明的颜色,就可以实现这样子的一个目的:

🌠 这里需要用到的是background-image而不能直接使用background属性来实现,因为在这种情况下,只有使用background-image才能将动画作用到文本上,否则将只会作用在其背景中!

aspect-ratio

aspect-ratio是CSS中的一个属性,用于设置元素的宽高比,允许我们明确指定元素的宽高比,而无需显示地设置宽度或者高度。 👉 这个属性非常适合创建响应式布局,尤其是在涉及图片、视频等元素时,通过这个这个属性,我们可以确保在不同的尺寸的屏幕上保持一定的宽高比,从而使布局更加稳定与一致
aspect-ratio的属性语法如下:

1
aspect-ratio: <ratio>;

:face_with_diagonal_mouth: 这里的<ratio>表示一个宽高比的数值或者是一个计算值,比如16/9或者是4/3,也可以是auto关键词!!

css函数

calc()

calc()函数允许在声明css属性值时执行一些计算,用一个表达式作为它的参数,将表达式的结果作为值,这个表达式一般是+、 -、*、/的简单运算组合,
通过使用动态计算的值,可以在不同的环境中灵活地调整布局与样式,而不必硬编码具体的数值!
需要注意的是:calc()函数的结果必须是一个长度值、百分比、视窗单位或者字体相对单位,否则将会导致css解析错误!!!
:+1: 而且,在calc()函数的表达式中,操作符两边必须要有空格隔开!!

操作相关

这里将记录与用户操作行为相关,一般包括鼠标、键盘等操作时间!

pointer-events

用于控制元素对于鼠标事件的响应方式,它可能有以下的几种取值:

  1. auto: 元素表现得像没有指定pointer-events属性,事件将在该元素上触发;
  2. none: 元素不响应鼠标事件,事件会穿透到下层元素;
  3. visiblePainted: 元素不响应鼠标事件,但会成为鼠标事件的目标,事件穿透到下层的元素;
  4. visibleFill: 元素不响应鼠标事件,但会成为鼠标事件的目标,事件不会穿透;
  5. visibleStoke: 元素不响应鼠标事件,但会成为鼠标事件的目标,事件不会穿透到下面的元素;
  6. painted: 元素不响应鼠标事件,也不会成为鼠标事件的目标,事件会穿透到下层元素;
  7. fill: 元素不响应鼠标事件,也不会成为鼠标事件的目标,事件不会穿透到下层元素;
  8. stroke: 元素不响应鼠标事件,也不会成为鼠标事件的目标,事件不会穿透到下层的元素。

pointer-events属性可以用于创建一些特殊的交互效果,比如点击穿透、通过遮罩层控制事件响应等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events Example</title>
<style>
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
pointer-events: none; /* 允许事件穿透 */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h2>内容区域</h2>
<p>这是一些内容。</p>
<button>按钮</button>
</div>
</body>
</html>

🌟 在这个例子中,.overlay类的元素是一个半透明的遮罩层,通过设置pointer-events: none;,使得鼠标事件能够穿透该层。这样,即使遮罩层覆盖在内容区域上,用户仍然可以直接与内容区域下方的元素进行交互,而不受遮罩层的影响。

伪类相关

媒体查询

动画相关

布局相关

grid布局

auto-fit、auto-fill、repeat()实现响应式布局

auto-fit: css grid布局中的一个关键词,用于定义自动填充网格容器中的网格元素的数量和大小,当使用auto-fit关键词的时候,网格元素会自动填充可用空间,使得网格容器中的网格元素可以自适应容器的大小,同时保持网格的规整布局,一般来说,auto-fit关键词通常与minmax()函数结合使用,用于定义网格的大小范围, 👉 minmax()函数指定的网格元素的最小和最大尺寸,使得网格元素可以根据可用空间自动调整大小
repeat(): 用于重复指定的网格元素来创建网格布局,它接收两个参数:重复次数(可以是数字count,也可以是auto-fit或者auto-fill)和网格元素的定义(可以是长度值,也可以是百分比,也可以是自动调整值auto,也可以是份数比例1fr)
关于auto-fitauto-fill的区别在于auto-fill不会删除多余的空白列或者是行,将多出来的保留着
👇 是关于这3者的一个运用,并结合媒体查询与aspect-ratio实现自适应缩放填充的效果