css学习

1.clamp 

font-size: clamp(2rem, 4vw, 3rem);

font-size:clamp(min,first,max)。clamp用于动态调整元素字体大小，第一个参数是最小值，第三个参数是最大值，第二个是首选值。

如代码，字体最小为2rem，最大4rem，首选4vw（视口宽度的 4%）

工作原理

• 当视口很窄时：如果视口宽度计算出的 4vw 小于 2rem，字体大小会被锁定为 2rem。
• 当视口适中时：字体大小会随着视口宽度的变化而线性调整（例如，视口越宽，字体越大）。
• 当视口很宽时：如果视口宽度计算出的 4vw 大于 3rem，字体大小会被锁定为 3rem

优点：不用写媒体查询，字体就会自适应屏幕大小。 

2.box-shadow

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

参数1：水平偏移；

参数2：垂直偏移；

参数3：模糊半径（值越大越柔和范围越大）；

参数4：扩散半径（阴影的整体大小调整。负值会缩小阴影）

3.-webkit-

 浏览器前缀（Vendor Prefix），其作用是让尚未成为 W3C 标准的 CSS 属性在基于 WebKit 引擎的浏览器上能够正常运行。在 CSS 新特性的标准化进程中，浏览器厂商往往会先以实验性的形式支持这些特性。为了避免不同浏览器实现的同一特性在名称或语法上产生冲突，同时也为了在特性标准化之后能够顺利过渡，就需要使用浏览器前缀。

假如新出了一个css属性，但是没有做到全球统一，在有的浏览器可以直接用这个属性，在另一个不生效，得加上-webkit-