css

1 需求 一个有渐变背景的div，需要替换成多个渐变背景div拼接，渐变效果需要保持一致（不通过一个大的div渐变，其他子的div绝对定位其上并且背景透明来解决） 2 分析 主要工作： 计算完整div

1 问题 img标签添加::before ::after 伪元素无效 伪元素增加:hover伪类无效 2 解决 只能在img前后增加dom元素 可以这样写:hover::before{} :hover

1 :where伪类选择器 1.1 解释 :where伪类选择器，参数为 选择器列表，将会选择所有能被该选择器列表中任何一条规则选中的元素，优先级总是为 0，即拥有最低优先级，当有其他规则和 :whe

1 解释 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。浏览器会裁剪掉裁剪区域以外的内容，包括: 背景，内容，边框，阴影等，另外也不会捕获裁剪区域之外的ho

1 语法 2 示例 2.1 背景透明 图片与mask生成的渐变的 transparent 的重叠部分，会变得透明，这里#000可以为任意颜色，效果相同 2.2 图片裁切

1 解释 pointer-events 何种情况下元素可以成为鼠标事件的目标 2 取值 auto （默认值） none （元素不能对鼠标事件做出反应） / 以下只适用于 SVG / visiblePa

transformL:scale 语法：transform:scale(x,y); 可以看到，中间的box缩放后，显示长宽确实为原来的一半，但是左右两个box与它的距离并没有重新计算，也就是说缩放后，

1 border 语法：border: width style color 2 outline 语法：outline: width style color 2.1 outline-offet 即：设置

grid网格布局，是一个二维系统，可以像表格一样将页面容器分割成一块一块的区域，定义子元素的排布和位置。 简单使用： 对父元素设置dispay：grid;grid-template-colums和gr

css实现三角形是常见的需求，在此记录如下 1 border实现 原理：相邻接的border之间会形成一条斜线(可按此联想记忆) 注意：相邻接的border形成的斜线，一定是相邻接 下侧橙色，说明下侧

实现流光边框一般是用渐变背景加动画实现，然后使用内部盒子遮挡内部空间，达到边框流光的效果 思路：背景渐变+旋转动画 动图（略）

功能： 自定义渐变（是否渐变，渐变颜色） 自定义斑马线（角度，宽度） 自定义百分比位置以及前缀文字、后缀文字 自定义动画时间 1 进度条 动图（省略） 2 增加百分比显示，位置选择以及前缀后缀文字 默

1 HTML标签 <meter>：显示已知范围的标量值或者分数值 <progress>：显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条 1.1 <meter> min、max、value

类型 常用表述 基准点 static（默认值） 静态定位 无定位，位置为文档流中本来的位置 relative 相对定位 文档流中本来的位置 absolute 绝对定位 由内向外祖先元素中第一个有定位的