目录
1. 布局相关属性
2. 定位相关属性
3. 背景相关属性
4. 边框相关属性
5.文本相关属性
5.1 字体属性
5.2 文本属性
6. 列表相关属性
7. 动画相关属性
7.1 过渡
7.2 动画
7.21 创建动画关键帧
7.22 调用关键帧，触发动画
7.3 变形
7.31 transform
7.32 transform-origin
7.33 3D变形
8. 其他属性
1. 浮动 / 清除
2. 轮廓outline
3. 光标cursor
4. table相关属性
5. 内容 / 文本超出
6. 盒子 / 文本阴影效果
7. 渐变色
8. 滤镜filter
9. content
10. clip-path
11. white-space
1. 布局相关属性
① Flexbox： 弹性布局
② Grid： 网格布局
参考文章：HTML响应式布局(Flex+Grid+Media Queries+相对单位，万字总结)-CSDN博客
③ box-sizing：改变CSS盒模型
box-sizing: content-box; /* 标准盒子模型 */
box-sizing: border-box; /* IE盒子模型 *
标准盒子模型： 由margin，boder，padding，content四部分组成。在标准盒子模型中，元素的width和height属性仅指content区域的宽度和高度
IE盒子模型： margin，content（border + padding + content）两块组成。在IE盒子模型中，元素的width和height属性不仅包含content区域的宽度和高度，还包含了padding和border的宽度。换句话说，IE盒子模型的width和height属性是内容、内边距和边框的总和。
2. 定位相关属性
① static， 默认定位。按照常规文档流进行显示
② relative， 相对定位。通过left,bottom...等来设置相对自己的偏移，但元素所占空间保留在原 位，不会被挤占 ，不会影响正常文档流，通常用来用作包含元素。
③ absolute， 绝对定位。通过left,bottom...等来设置相对包含元素(除static的父级元素)的偏移 。元素所在空间会被挤占，而其本身则会覆盖在其他元素上方，会将元素移除正常的文档流 。
④ fixed， 固定定位。通过left,bottom...等来将元素相对于浏览器窗口（即包含元素为浏览器窗口）固定，会使元素脱离正常文档流 。适合用来固定导航。
⑤ sticky， 半固定定位。类似于fixed和relative的结合， 通过left,bottom...等来相对于浏览器窗口固定，但无论怎么滑动窗口元素位置都会相对于视窗固定，而其他元素属于正常文档流
⑥ z-index， 控制元素堆叠顺序。设置z轴偏移，取值为数字，值越大越靠近屏幕，默认为0。注意：只能给非static定位的元素设置z-index属性
3. 背景相关属性
① background-color： 设置元素背景颜色
② background-image： 设置元素背景图像，可以是URL或CSS渐变
③ background-repeat： 控制背景图像的重复方式
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
水平/垂直方向都重复（默认值） | 仅水平重复 | 仅垂直重复 | 不重复
④ background-position：设置背景图像的起始位置
background-position: top | bottom | left | right | center | 精确的位置值px、
可同时选两个值用以描述背景图的起始位置。如：left bottom 位于左下
⑤ background-attachment：控制背景图像是否随页面滚动
background-attachment: scroll | fixed | local;
scroll 背景图随页面的其余部分滚动（默认值）
fixed 背景图相对视口固定，即使页面滚动它也不会移动
local 背景图相对元素内容区域固定，当元素有滚动条并滚动时，背景图随内容一起滚动
⑥ background-size：指定背景图像的大小
background-size: cover | contain | 具体尺寸;
cover 背景图完全覆盖，可能会被裁剪以适合
contain 背景图像完全适应，可能会被拉伸或压缩以适合
具体尺寸（如100px 100px）或百分比（如50% 50%）
⑦ background：简写属性，允许你在一个声明中设置上述所有背景属性。
.box {
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size];
background: #ffffff url('path/to/image.jpg') no-repeat fixed center / cover;
}
注意： 确保 background-position / background-size中间有‘/ ’
4. 边框相关属性
① border-style：定义边框样式
.box {
border-style:;
none： 无边框。
solid： 实线边框。
dashed：虚线边框，由一系列短线段组成。
dotted：点线边框，由一系列点组成。
double：双线边框，由两条并排的实线组成。
groove：凹槽边框，带有3D凹槽效果。
ridge： 凸起边框，带有3D凸起效果。
inset： 内嵌边框，带有3D内嵌效果。
outset：外凸边框，带有3D外凸效果。
}
② border-width：设置边框的粗细。通常是具体的像素值（如2px）
③ border-color：设置边框的颜色。十六进制值，RGB值，RGBA值或transparent值等
④ border：简写属性，允许同时设置边框的宽度、样式和颜色。语法：“border: 宽度 样式 颜色;”
border: 2px solid red;
⑤ 单独设置各边边框。border-top、border-right、border-bottom和border-left。
border-top-style: dotted;将仅设置元素上边框的样式为点线。
⑥ border-radius：设置元素四角的圆角半径，创建出更加平滑和美观的边框效果
border-radius: length | %;
length：定义圆角的大小，可以是像素（px）、em、rem等单位
%：表示圆角的大小是相对于元素尺寸的百分比。
border-radius属性可以接受一到四个值，分别对应左上角、右上角、右下角、左下角的圆角半径。如果设置的值不足四个，则剩余的角落将按顺序重复使用已设置的值。比如：只设置了两个值时，第一个值用于左上角和右下角，第二个值用于右上角和左下角。
或单独设置每个角
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 30px;
⑦ border-image：使用图像作为边框，可以指定边框图像的路径、切片、宽度、偏移量和重复方式。是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性的简写形式。如下：
border-image: source slice / width / outset repeat;
source：图像路径，URL | CSS渐变
slice： 图像开始分割的位置，分9个区域（上、右、下、左以及四个角），px | % | fill关键字
width： 图像宽度，数值 | % | auto。默认为1，图像宽度等于边框宽度
outset：图像外延尺寸，边框图像区域超出边框盒子的距离
repeat：图像平铺方式，stretch（拉伸） |repeat（重复） |
round（重复并尽可能完整地显示图像）|space（重复并均匀分布空白）
示例:
.box {
border-width: 2px;
border: 30px solid transparent; /* 透明边框，为border-image提供空间 */
border-image: url('../sites/img/2.jpg') 30 30 round;
/* 或分开写：
border-image-source: url('border.png');
border-image-slice: 30 30;
border-image-width: 30;
border-image-repeat: round;
*/
}
5.文本相关属性
5.1 字体属性
① font-size：字体大小。 值为 绝对单位（如px、pt）或相对单位（如em、rem、%）
②font-weight：字体粗细。值为 关键字（normal、bold等）或数值（100到900）
③ font-style：字体风格。 值为 normal普通 | italic斜体
④ font-family：字体系列。可指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。如 ：微软雅黑，宋体.....等（但需要系统已安装）
⑤ font：简写属性，font : font-style | font-weight | font-size | font-family。必需按顺序写
5.2 文本属性
① color：文本颜色
② line-height：行高。 取值为：数值、单位或百分比
③ text-align： 文本行内文的本水平对齐方式。取值为：left、right 、 center、justify
④ vertical-align： 文本行内的文本垂直对齐方式。取值为：baseline、top、middle、bottom
⑤ text-indent：文本的首行缩进。取值为：px、em 等
⑥ text-decoration：文本装饰线。
text-decoration：underline | line-through | overline | none
下划线 | 删除线 | 上划线 | 无装饰线
⑦ letter-spacing：字符间距。正值增加间距，负值减少间距
⑧ word-spacing：单词间距。与letter-spacing类似，但作用于单词之间，所以只对英文有效
⑨ white-space：空白的处理方式。文本超出后是否换行。取值：nowrap以防止文本换行
6. 列表相关属性
① list-style-type：设置列表前的标记
/*此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了*/
ul {
list-style:
disc 实心圆点（无序列表默认）
circle 空心圆
square 方块
none 无标记
decimal 数字（有序列表默认）
upper-roman 大写罗马数字
lower-roman 小写罗马数字
upper-alpha 大写字母
lower-alpha 小写字母
}
② list-style-image：用图像作为列表项的标记。值为URL
③ list-style-position：设置列表项标记的位置。
ul {
list-style-position:
inside 标记位于列表项内容内
outside 标记位于列表项内容外（默认值）
}
④ list-style：简写属性。如 { list-style: square inside url('bullet.png');
7. 动画相关属性
7.1 过渡
CSS过渡（transition）属性允许CSS属性值在一定的时间间隔内平滑地过渡。这种效果可以增强用户体验，使网页的交互更加自然和吸引人。
① transition-property，指定哪些CSS属性将应用过渡效果。
transition-property:
none：不应用过渡效果。
all（默认值）：所有可过渡的属性都将应用过渡效果。
[property name]：指定一个或多个属性名称，多个属性之间用逗号分隔。
注意：所有数值类型的属 性，都可以参与过渡， ⽐如width、height、 left、top、border，radius、opacity等。且必须是从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
② transition-duration（必选），定义过渡效果持续的时间。时间的单位：s和ms ，1s=1000ms
如果未指定持续时间，则过渡效果不会执行。
③ transition-timing-function，指定过渡效果的速度如何随时间变化。
transition-timing-function:
linear：匀速过渡。
ease（默认值）：开始和结束较慢，中间加速。
ease-in：开始慢，然后加速。
ease-out：开始快，然后减速。
ease-in-out：先加速后减速。
cubic-bezier(n,n,n,n)：允许自定义贝塞尔曲线。n值在0-1之间
④ transition-delay，指定过渡效果开始前的延迟时间。时间的单位：s和ms
⑤ transition，简写属性。同时设置过渡相关的所有属性（按顺序）
transition: property duration timing-function delay;
过渡效果示例：
div {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s ease-in-out 1s; /* 简写形式 */
/* 或者分开写 */
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
div:hover {
width: 200px; /* 鼠标悬停时，宽度将在延迟1秒后的2秒内平滑过渡到200px */
}
7.2 动画
动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 而动画可以⾃动触发
7.21 创建动画关键帧
@keyframes 规则，用于创建动画。你需要指定一个动画名称，以及动画期间的一系列关键帧
⽅法⼀：from..to
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}
}
⽅法⼆：百分比
@keyframes 关键帧名称{
0%{初始状态属性}
50%（中间还可以再添加关键帧）
100%{结束状态属性}
}
注意：帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置。可以同时设置关键帧，⽤逗号（,）隔开就⾏
7.22 调用关键帧，触发动画
① animation-name，绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画 (必选)
② animation-duration，动画的完成时间，告诉 系统动画持续的时长 （必填）
③ animation-timingfunction，定义动画的速度曲线（与过渡里面的类似）
④ animation-delay，动画在启动前的延迟间
⑤ animation-iterationcount，动画的播放次数。无限次播放：infinite;
⑥ animation-direction，定义动画播放的方向。
animation-direction:
normal: （默认值）顺序播放
reverse：倒序播放
alternate：正向和反向之间交替播放。先正后反
alternate-reverse：反向和正向之间交替播放。先反后正
⑦ animation-fill-mode，规定当动画不播放时 （完成时/播放延迟时），应用到的元素样式
animation-fill-mode
none（默认值）：不改变默认行为。
forwards： 动画完成后，保持最后一个关键帧中定义的样式。即动画结束后，元素将保持动画结束时的状态。
backwards：在动画开始前，应用第一个关键帧中定义的样式。（需要动画的延迟时间足够长，才能显示出来）
both：同时应用forwards和backwards规则。
⑧ animation-play-state，告诉系统当前动画是否 需要暂停
animation-play-state
running（默认值）：设置为running时，动画将开始或继续播放。
paused：设置为paused时，动画将暂停播放。如果动画正在播放中，将其animation-play-state更改为paused会立即停止动画，但动画的当前状态（如元素的位置、大小等）会保持在暂停的那一刻。
⑨ animation，简写属性。
animation: animation-name animation-duration animation-timingfunction
animation-delay animation-iterationcount animation-direction
animation-fill-mode animation-play-state
动画效果示例：
@keyframes example {
0% {
width: 0px;
background-color: red;
}
50% {
width: 200px;
background-color: orange;
}
100% {
width: 300px;
background-color: yellow;
}
}
div {
height: 100px;
animation: example 4s linear 1s infinite alternate both;
/* 或分开写 */
animation-name: colorChange;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
7.3 变形
CSS变形（Transform）是指通过CSS属性来改变元素的形状或位置，而不会影响页面的布局（即不会脱离文档流）。它支持对元素进行旋转、缩放、移动（平移）、倾斜以及更复杂的矩阵变换。
注意：变形通常会结合transition或animation的速度变化属性来设置平滑的过渡效果。
7.31 transform
这是用于实现元素变形的核心属性。（注意：变形对于⾏内元素是没有效果的。变形不会影响其他元素。）它可以接受一个或多个变形函数，如下：
① translate(X，Y，Z)，平移。
1）X轴正值向右，负值向左。Y轴正值向下，负值向上。
2）参数值可以是px，可以是% ，百分⽐是相对于⾃身计算
3）位移是相对于元素自己的原位置
4）也可单独对X/Y/Z轴进行设置。如下
//垂直⽔平居中的效果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translateX(-50%) translateY(-50%);
② rotate(X，Y，Z)，旋转。
1）默认围绕中⼼点转动。
2）默认的单位是deg，⽐如rotate（45deg），正值顺时针，负值逆时针。
3）可以单独对x轴y轴z轴进⾏设置。rotateX() ，指元素围绕其 X 轴旋转；rotateY() ，元素围绕其 Y 轴旋转；rotateZ() , 元素围绕其 Y 轴旋转
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: 2s linear;
}
div:hover {
/* 当鼠标悬停在div上时，顺势正旋转360度 */
transform: rotate(360eg);
/*绕X/Y轴转*/
transform: rotateX(360deg) rotateY(360deg);
}
③ scale(X，Y，Z)，缩放。
1）元素根据中⼼原点进⾏缩放。
2）默认值是1，没有单位，0~1元素缩⼩，0则是消失；1以上元素变⼤。
3）也可单独对X/Y/Z轴进行设置scaleX()只X轴缩放，scaleY()只Y轴缩放
transform: scale(3);/* 放大3倍 */
transform: scale(0.5);/* 缩小到一半 */
④ skew（X，Y），倾斜
1)通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。
2）默认的单位是deg。（左上⻆为参照），X正向左，负向右。Y正向上，负向下。
3）可单独对 X轴 Y轴进⾏设置。skewX()/skewY()
transform: skew(45deg, 45deg);/*X&Y倾斜45°*/
7.32 transform-origin
变形原点
1）用于设置变形的原点（即变形的中心点）。默认，变形的原点是元素的中心点（50% 50%）。通过改变这个值，可以控制元素变形的方向和位置。
2）设置偏移量值都是从元素左上⻆开始的。 3）transform-origin（X，Y），X，Y可以是⽅向值（left、center、top、right、bottom等），也可以是px、%为单位的数值。
7.33 3D变形
上面我们提到部分变形函数能实现Z轴方向上的变形。但并没有讲解演示。因为，如果需要在视觉上展现出三维变化的效果。我们需要对变形元素的父元素进行一些操作：
① transform-style
1）它用于定义当元素变形时，其是如何在三维空间中呈现的。
2）flat（默认值）：表示所有子元素在二维空间中被渲染，不考虑三维效果。即使应用了三维变形，在视觉上不会有任何效果，因为所有内容都被压平在二维画布上。
3）preserve-3d：表示子元素在三维空间中被渲染。
4）transform-style是用于设置父元素的属性
② perspective和 perspective-origin
1）这两个属性用于在3D变形中创建透视效果
2）perspective属性用于定义用户与3D空间内元素之间的距离，这个距离会影响元素在三维空间中的视觉效果，使得元素呈现近大远小的透视效果。它的值是一个长度，表示可透视的最大距离。
3）perspective-origin属性用于定义3D元素所基于的X轴和Y轴的位置，即透视的起点或观察者的角度。
③ translateZ，rotateZ和 scaleZ
作用和上面介绍的二维变形差不多，只是把参考方向/坐标轴换成了垂直于屏幕的Z轴
3D变形示例
................HTML...............
dy>
.................CSS................
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotateCube 10s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #ccc;
line-height: 200px;
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotateCube {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
8. 其他属性
1. 浮动 / 清除
① 浮动
float :通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，如果一行显示不下，则会换行显示。
float属性主要用于布局设计，如创建多栏布局、导航菜单或实现文本环绕图像的效果。
子元素{
float: left | right | none ;
左浮动 | 右浮动 | 不浮动（默认）
}
浮动的坏处——父元素高度塌陷：
当容器内的子元素都设置为浮动时，这些子元素会脱离文档流，不再占据原本的空间。这会导致父容器无法被撑开，其高度可能会塌陷为0，除非显式地设置了父容器的高度。
② 清除浮动
由于高度塌可能会造成页面布局混乱，因此常常需要清除浮动。
方式1：clear属性，在浮动元素之后添加一个空元素并为其设置clear: both;样式。以防止后续元素浮动到该元素的旁边。方法简单直接，但可能会增加HTML的冗余代码。
浮动子元素后的元素{
clear:
both两侧不允许出现浮动元素
}
方式2：父元素触发BFC（块级格式化上下文），方法较多.....略
方式3：伪元素（clearfix），为父元素上添加一个伪元素（如::after），并设置其样式来清除浮动，好用且无副作用。
父元素::after {
content: '';
display: block;
clear: both;
}
方式4：显示设置父元素高度，如果父元素的高度可以固定或预知，那么直接为父元素设置高度也可以解决高度塌陷的问题。但这种方法不够灵活，不适用于高度动态变化的情况
2. 轮廓outline
轮廓outline，用于在元素周围绘制一条轮廓线，位于border外围，可以突出显示元素。不会影响页面布局或元素的可点击区域。
① outline-style，轮廓线样式。和 boder-style 可选值一样，效果也基本一致
.box {
outline-style: none | solid | dashed | dotted | double |
groove | ridge | inset | outset;
}
② outline-width，轮廓线粗细。通常是具体的像素值（如2px）
③ outline-color，轮廓线的颜色。
④ outline，上面三个属性简写：
.element {
outline: 2px solid red;
}
outline与border的区别：
border可以应用于所有html元素，而outline主要用于表单元素、超链接元素当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为 border会占用元素的空间，影响元素的大小和布局；而outline不会
3. 光标cursor
用于设置鼠标指针在元素上悬停时显示的样式
auto：浏览器根据元素的上下文自动选择合适的光标指针样式 default：默认光标
pointer，手形，通常用于链接、按钮或其他可点击的元素上
move，表示可移动的
text，文本选择光标。通常不需要显式设置，因为输入框默认就是这种样式。
wait，旋转圆圈，表示程序正忙，需要等待。
自定义样式，使用url()函数指定光标图片。通常和默认样式一起使用防止浏览器不支持而无法加载。如：{ cursor: url(..), move }
4. table相关属性
table常用样式的属性
border在表格外围设置边框border-collapse表格中相邻边框是否合并，取值：seprate、collapseborder-spacing设置单元格之间的距离。当相邻边框合并时，不起作用。
th/td常用样式属性：
border为单元格设置边框padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）
5. 内容 / 文本超出
① overflow
处理元素超出指定大小时的内容。不可用于行内元素（其大小仅由内容决定）
visible： （默认值）内容不裁剪，会渲染在元素框之外。hidden： 超出部分的内容会被裁剪，并隐藏。scroll： 超出部分被裁剪，但有滚动条以便查看其内容。无论是否出现溢出始终出现滚动条auto： 和sroll作用相同，但auto只会在内容溢出时才会出现滚动条。
② text-overflow
指定当文本溢出时应该做什么，但并不会改变文本的布局或溢出行为，通常与overflow: hidden;一起使用，且只对块级元素或设置了固定宽度的元素有效
clip：默认值，将溢出的文本裁剪掉，不显示任何内容ellipsis：表示在溢出的文本末尾显示省略号（...）
使用示例
如：让文字超出部分显示为省略号（....）
上面的例子中，使用white-space: nowrap防止文本换行，所以，文本最多显示一行，超出一行的宽度就会省略。
如果需要设置为限制文本行数，可以这样设置：
1. 利用 Webkit内核特有的-webkit-line-clamp属性
.text {
width: 500px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px; /* 设置行高，精确控制文本显示的行数 */
display: -webkit-box; /* 设置为一个块级元素，并使用Webkit内核的盒子模型特性*/
-webkit-box-orient: vertical; /* 设置盒子模型的子元素的排列方向为垂直方向 */
-webkit-line-clamp: 3; /* 限制显示的文本行数 */
}
但缺点是这种方法在非Webkit内核的浏览器中可能不被支持或表现不同。需要考虑浏览器兼容性问题。
2. 使用JavaScript动态截取文本
通过JS动态地计算文本的行高和容器的高度，然后根据这些值来截取文本内容，确保它不会超过指定的行数。虽然比纯CSS方法更复杂，但它提供了更高的灵活性和跨浏览器兼容性。
6. 盒子 / 文本阴影效果
① box-shadow
给盒子或者说边框，添加阴影效果
.box{
/*基本阴影*/
box-shadow: 1px 2px 5px 2px rgba(191, 195, 198,0.8);
/*或内部阴影*/
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
/*或内多重阴影*/
box-shadow: 3px 3px 5px 4px rgba(17, 228, 186, 0.9),
-1px -1px 5px 4px rgba(73, 37, 189, 0.9);
}
水平偏移量(1px): 阴影在水平方向上相对于元素的位置。正值向右，负值向左。垂直偏移量(2px): 阴影在垂直方向上相对于元素的位置。正值向下，负值向上。模糊半径(5px ): 阴影的模糊程度。越大越模糊，越小越清晰。扩展半径 (2px): （可选值），阴影的大小。正值使阴影变大，负值使阴影缩小。颜色rgba(191, 195, 198,0.8): 阴影的颜色。0.8控制透明度80%；内阴影 inset： (可选关键字)，如果使用，阴影将作为内阴影显示在元素内部，而非外部多重阴影： 可以在元素上添加多个阴影，通过参数控制样式
② text-shadow
给文本添加阴影效果，与box-shadow多处相似
.text{
text-shadow: 2px 2px 4px rgba(68, 81, 204, 0.8);
/*或多重阴影*/
text-shadow: 1px 1px 2px #000, 0 0 10px #ff0000,
0 0 20px #00ff00;
}
水平位置（2px）： 水平阴影的位置。允许负值
垂直位置（2px）： 垂直阴影的位置。允许负值
模糊距离（4px）： 越大越模糊，越小越清晰
阴影颜色 rgba(68, 81, 204, 0.8)：略
7. 渐变色
CSS渐变色允许你创建平滑的颜色过渡效果，它可以应用于背景、边框、文本等。
① 线性渐变（Linear Gradient）：线性渐变可以沿着一条直线方向发生颜色变化
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：渐变的方向，可以是角度（如45deg）或预定义的方向（如to right、to bottom right等）。
color-stop：颜色节点，指定渐变过程中颜色的位置和颜色值。
示例：
/* 从上到下，蓝色到红色的渐变 */
background: linear-gradient(to bottom, blue, red);
/* 45度角渐变，从黄色开始，到绿色，再到蓝色 */
background: linear-gradient(45deg, yellow, green, blue);
/* 使用百分比定义颜色节点位置 */
background: linear-gradient(to right, red 20%, yellow 80%);
② 径向渐变（Radial Gradient）：径向渐变由它的中心定义，并且颜色沿着圆形或椭圆形路径向外扩散。
background: radial-gradient(shape size at position, start-color, ..., last-color);
shape：渐变的形状，可以是circle（圆形）或ellipse（椭圆形，默认值）。
size：渐变的尺寸，可以是关键字（如closest-side、farthest-corner等）或具体尺寸（如100px 150px）
position：渐变中心的位置，可以使用关键字、百分比或长度值。
start-color, ..., last-color：定义渐变中的颜色节点。
示例：
/* 从中心开始，红色到黄色，再到绿色的圆形渐变 */
background: radial-gradient(circle, red, yellow, green);
/* 椭圆形渐变，从左上角开始，蓝色到紫色 */
background: radial-gradient(at left top, blue, purple);
/* 定义尺寸和位置的椭圆形渐变 */
background: radial-gradient(ellipse 50% 70% at 50% 150%, red, orange, yellow, green, blue, indigo, violet);
8. 滤镜filter
filter 属性用于对图像或元素应用图形效果，比如模糊、灰度、亮度调整等。它可以通过CSS直接在页面上应用这些效果，而不需要借助JavaScript或额外的图像文件。
常见滤镜效果有：
img {
filter: grayscale(100%); //这行代码将图像转换为完全灰度。
}
blur()：模糊效果。
brightness()：调整亮度。
contrast()：调整对比度。
drop-shadow()：添加阴影。
grayscale()：将图像转换为灰度。
hue-rotate()：旋转色相。
invert()：反转颜色。
opacity()：调整透明度（虽然它更像是opacity属性，但这里作为滤镜之一）。
saturate()：调整饱和度。
sepia()：将图像转换为棕褐色调。
9. content
它主要用于在伪元素（如::before和::after）中插入生成的内容。
① 插入字符串
.box::after {
content: '插入字符串';
}
② 插入图标
.box::after {
content: url(../Sites/img/3.jpg);
}
③ 动态属性
.dynamic-link {
position: relative; /* 为伪元素定位做准备 */
}
.dynamic-link::after {
content: ' (点击我)';
position: absolute;
left: 100%; /* 将伪元素放置在链接的右侧 */
opacity: 0;
white-space: nowrap; /* 防止换行 */
transition: opacity 0.3s ease; /* 添加过渡效果 */
}
.dynamic-link:hover::after {
opacity: 1; /* 鼠标悬停时显示伪元素 */
}
注意：
1. ::before和::after必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上；
2. ::before和::after 默认user-select: none，内容无法被用户选中；
3. 伪元素 ::before 和 ::after 是用来在元素的内容之前或之后插入内容的，但像 这样的元素是 自闭合的，它们不能包含任何子内容，因此伪元素不会生效。
10. clip-path
clip-path 属性允许你通过在元素上创建一个裁剪区域来选择性地控制元素的显示范围，而隐藏其他部分，使其呈现出一种镂空效果。
它支持多种路径类型，如矩形、圆形、椭圆形、多边形等，以及SVG图形和路径。通过选择不同的路径类型和参数，可以创建复杂的裁剪形状。
我们先设置一个img 元素的样式：
img {
width: 100px;
height: 100px;
border: 10px solid rgb(0, 179, 255);
padding: 20px;
background-color: rebeccapurple;
}
1. circle()，圆形裁剪区域，需指定半径（px或%）和圆心坐标。
//创建一个半径为元素宽度一半的圆形裁剪区域，圆心位于元素的中心。
clip-path: circle(50% at 50% 50%)
//或 clip-path: circle(50%)
2. ellipse()，椭圆形裁剪区域，需指定横轴和纵轴的半径以及圆心的坐标。
// 创建一个椭圆形的裁剪区域
clip-path: ellipse(50% 25% at 50% 50%)
// 或 clip-path: ellipse(50% 25%)
3. polygon()，创建一个多边形裁剪区域。需指定构成多边形的顶点坐标。
//创建一个菱形裁剪区域
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
4. path()，使用SVG路径来定义裁剪区域。需要指定路径的字符串表示形式。该路径由一系列命令和坐标点组成。
clip-path: path('M 10,10 L 90,10 L 90,90 L 10,90 Z')
5. inset()，定义一个内嵌的矩形裁剪区域，其参数分别代表从元素的上、右、下、左四个方向向内偏移的距离。
clip-path: inset(10px 10px 10px 10px);
11. white-space
作用：指定如何处理元素内的空白（包括空格、制表符和换行符）
normal：默认值。合并空白符，文本自动换行（适应容器的宽度）
nowrap：合并空白符，文本不自动换行（即使文本超度超出容器）
pre：保留空白符，文本只在遇到换行符或者
标签时换行
pre-wrap：保留空白符，遇到换行符、
标签，或者达到容器边界时会换行
pre-line：合并空白符，遇到换行符、
标签，或者达到容器边界时会自动换行
所谓“合并空白符”，就是“合并连续的空白符”。
所以在HTML中，无论文本或元素中间有多少个空格，换行符，制表符，默认都会合并成一个空格
CSS基础笔记：前端笔记【二】：CSS
若有帮助，愿点赞收藏，以表支持！！！！
若有错误或描述不当，烦请评论或私信指正，万分感谢 ！！！！😃