前言，简单整理了一些css3的属性
1. clip-path
clip-path 创建复杂的裁剪形状，使元素仅显示被裁剪区域内的部分。
可视化工具：
https://tools.jb51.net/static/api/css3path/index.html
语法:
clip-path: 内置几何形。
内置几何形。状如 circle()、polygon()
示例.nav {width: 200px;height: 60px;background-color: #141e37;-webkit-clip-path: polygon(10% 0, 100% 1%, 90% 100%, 0% 100%);clip-path: polygon(10% 0, 100% 1%, 90% 100%, 0% 100%);}
2. 滤镜 filter
CSS滤镜通过filter 属性实现，可对元素及其子元素进行实时图像处理，无需修改原始素材。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
示例：
img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%);
}
2.1 背景滤镜
backdrop-filter是 CSS 中的一个图形滤镜属性，主要用于对元素背后的区域（即“背景”）应用滤镜效果。
它通常与半透明背景配合使用，能实现类似“毛玻璃”的视觉效果，使用方法和filter类似，这里不展开了。
3. nimation-timeline 动画时间线
animation-timeline 是 CSS 中用于控制动画时间线的核心属性，它允许开发者将动画进度与特定事件（如滚动、视口可见性）绑定，从而实现更复杂的交互效果。
滚动时间线：动画进度与页面或容器的滚动位置关.navbar {position: fixed;top: 0;left: 0;width: 100%;height: 100px;background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.scrollbar {width: 0%;height: 3px;background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);animation: scrollbar 2s linear forwards;/* 添加滚动时间线 *//* 让动画绑定时间线 */animation-timeline: scroll();}/* 彩色线条动画效果 */@keyframes scrollbar {0% { width: 0%; }100% { width: 100%; }}<div class="navbar"><div class="scrollbar"></div></div>
视图时间线：动画进度与元素进入/离开视口的可见性关联.box img {opacity: 0.2;animation: anim 1s linear forwards;/* 绑定视图时间线 */animation-timeline: view();}/* 图片动画 */@keyframes anim {0% {transform: scale(1);opacity: 0.2;}100% {transform: scale(1.5);opacity: 1;}}
示例比如保时捷的官网进度条效果
4. 常用的 calc() clamp() max() 和 min() 函数
函数可以执行数学运算（加减乘除），支持混合单位
.box{width: calc(100% - 20px);height: calc(var(--base-size) * 1.5);
}
CSS 的 clamp() 函数用于设置一个值，该值会根据视口的大小在最小值和最大值之间自适应调整。
clamp() 函数有三个参数：最小值、首选值和最大值。如果首选值在指定范围内，浏览器会选择首选值；否则，浏览器会选择最小值或最大值。
clamp(min, preferred, max)
min 可选。指定允许的最小值。 preferred 必需。指定首选值。 max 可选。指定允许的最大值。
/* 响应式字体 */
h1 {font-size: clamp(2rem, 2.5vw, 3.5rem);
}
/* 响应式宽高 */
.box {height: clamp(300px, 50vh, 600px);
}