前言

本文章将记录自己在工作/学习过程中所遇到的比较冷门、非经常使用的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(): 创建一个多边形裁剪路径

3d属性/变化相关

👇 将整理关于css中的3d效果的相关属性:

  1. transfrom: 用于元素变形的工具,包括有旋转(rotateXrotateYrotateZ)、缩放(scaleXscaleYscaleZ)、移动(translateXtranslateYtranslateZ)和倾斜(skewXskewYskewZ);
  2. transfrom-origin: 改变一个元素变换的原点,在制作3d效果时,调整这个原点非常有用,因为它将影响到元素绕x轴、y轴和z轴的旋转以及缩放方式;
  3. perspective: 给定3d变换元素定义一个透视效果,一个较小的值将会产生强烈的3d效果,而一个较大的值则将会产生较弱的3d效果;
  4. perspective-origin: 定义了透视点的位置,影响着3d变换元素时如何被观察的,可以通过修改这个属性来改变观察3d变换的视角,进一步增强3d效果;
  5. backface-visibility: 决定当元素旋转时元素的背面是否可见,这对于创建翻转效果非常有用;
  6. transform-style: 设置子元素是位于3d空间中还是平面中,也就是是否能够观察到其3d变化的效果!
backface-visibility

用于控制元素背面在旋转时是否可见的属性,一般在实现元素翻转效果时有用,允许开发者决定当元素的背面对着观察者时,是应该显示还是隐藏的,其语法如下:

1
2
3
element {
backface-visibility: visible|hidden;
}
  • visible: 默认值,当元素背面向着观察者时,它是可见的;
  • hidden: 当元素背面向着观察者时,元素背面不可见。
perspective

用于3d变换元素提供透视效果,透视是一种视觉效应,表示人肉眼观察远近物体时的视觉差异,远处的物体看起来比近处的小,通过这个属性,可以模拟到这种现象,让位于屏幕上的2d平面中的元素呈现出3d空间的深度感,其语法规则如下:

1
2
3
element{
perspective: value;
}
  • value(长度值): 定义观察者于”z=0”平面之间的距离,数值越小,透视效果越强烈,给人的感觉时用户距离物体更近,否则则相反。

perspective属性应该应用于包含3d变换元素的父元素上,而不是直接应用于进行3d变换的元素本身,另外一种方式时在3d变换的元素上进行transform: perspective(value);设置,这种是应用元素局部透视效果!

perspective-origin

定义在进行3d变换时透视点(即消失点)的位置透视点时观察者视线与3d元素交汇的点,它影响了3d变换元素的视觉效果,决定了元素如何在三维空间内呈现,通过调整perspective-origin属性,开发者可以改变用户感知到的3d元素的方向和深度,从而创造出不同的视觉效果, 👇 是其语法:

1
2
3
element{
perspective-origin: x-axis y-axis;
}
  • x-axis: 定义透视点沿水平方向的位置,可以是带单位的数值,也可以是关键字(top、left、right、bottom);
  • y-axis: 定义透视点沿垂直方向的位置,可以是带单位的数值,也可以是关键字(top、left、right、bottom);

默认值是50% 50%,意味着默认情况下,透视点将位于元素的中心位置,或者说是元素水平和垂直方向的中点,就是元素的正中心点!

结合上述的相关属性,实现一个hover绕y轴进行翻转的效果

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实现自适应缩放填充的效果