HTML-CSS（六十七）CSS新特性

自定义属性
​ CSS自定义属性（也称为‘css变量’），在目前所有的现代浏览器中都得到了支持。(之前碰到过less@、sass$)

css的自定义属性写法：

定义 ：root{–name：属性值} （不一定限制在：root当中，也可以在其他选择器中）

使用 选择器{ 属性名：var（–name） }
计算和单位：

如果在定义时，就给属性值设置单位，那么在引用的时候是可以不写单位的。

但是如果在设置属性值时不写单位，在引用时用拼接的形式写单位。那么不会被识别出来的

我们可以利用css的计算属性calc来解决在引用时添加单位
写法：属性名: calc(var(–后缀) * 1px);

默认值：
当定义变量中，有设置的属性值时，就是用设置好的值

如果设置的变量没有设置属性值或者根本没有设置该变量，那么就是用默认值
写法：
name:var(–后缀,默认值)

作用域：按优先级查找，先找本作用域下的，然后找，标签选择器，：root是最低的。


Shapes

css Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用

普通的文字环绕效果，都是贴margin边的垂直环绕的

不规则的环绕效果

shape-outside：

shape-outside：margin-box 在margin区域环绕

紫色部分时margin区域，形成圆弧

shape-outside: padding-box;在padding区域环绕

紫色区域：content

特殊图形：

clip-path:剪切路径

clip-path:circle()圆形 功能与我们border-radius类似

clip-path：polygon（坐标1，坐标2，坐标3，…）

三角形

实现文字环绕以及特殊图形效果

根据需求自由坐标组合

shape-outside:polygon();
clip-path: polygon();

使用shape-margin可以让文字和元素形成间距

scrollbar：自定义滚动条样式
::-webkit-scrollbar 在该伪类里设置滚动条的宽、高

html::-webkit-scrollbar{
			/* 宽度针对纵向滚动条 默认17px*/
			width: 50px;
			/* 高度针对横向滚动条 */
			/* height: 10px;   */
		}

::-webkit-scrollbar-thumb 滚动条的样式

html::-webkit-scrollbar-thumb{
				background: pink linear-gradient(to bottom,yellow,pink);
				border-radius:20px ;
			}

::-webkit-scrollbar-track 定义滚动条容器的样式

html::-webkit-scrollbar-track{
				background: goldenrod;
				box-shadow: lightcyan 5px 5px 20px 10px inset;
			}

Scroll Snap

CSS Scroll Snap（CSS滚动捕捉）允许你在用户完成滚动后锁定特定的元素或位置

scoll-snap-type: 设置在产生滚动条的容器中

​ x 设置捕捉滚动条的方向

​ mandatory 强制处理

scroll-snap-align 设置给产生效果元素当中

​ start 每次滑动元素都对齐开始部位

start 每次滑动元素都对齐开始部位

center 每次滑动元素在滑动界面都居中

end 每次滑动元素都在滑动界面的结束位置对齐