无心使然云中漫步

一个有渐变背景的div，需要替换成多个渐变背景div拼接，渐变效果需要保持一致（不通过一个大的div渐变，其他子的div绝对定位其上并且背景透明来解决）

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

作为对比，下面使用 footer.foot p设置样式，此时优先级和:is选择器设置的优先级相同，但是footer.foot p直接设置的样式后加载回覆盖掉:is选择器设置的样式（交换位置,则:is选择器样式生效），将会选择所有能被该选择器列表中任何一条规则选中的元素，优先级会计入整个选择器的优先级（采用其最具体参数的优先级），将会选择所有能被该选择器列表中任何一条规则选中的元素，优先级总是为 0。，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。:where伪类选择器，参数为 选择器列表。

属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由。]使用笔触边界框（stroke bounding box）作为引用框。利用对象边界框（object bounding box）作为引用框。使用最近的 SVG 视口（viewport）作为引用框。即通过引用一个svg的clipPath 元素来作为剪裁路径。分别为矩形的上右下左顶点到被剪裁元素边缘的距离（和。属性建立的坐标系的原点，引用框的尺寸用来设置。使用 border box作为引用框。使用margin box作为引用框。

图片与mask生成的渐变的 transparent 的重叠部分，会变得透明，这里#000可以为任意颜色，效果相同。

只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。/ 以下只适用于 SVG /

可以看到，中间的box缩放后，显示长宽确实为原来的一半，但是左右两个box与它的距离并没有重新计算，也就是说缩放后，视觉上可以看到效果，但是布局不会根据缩放后的大小重新计算,如果需要重新布局，需要自定义margin、transform:translate等进行补偿。语法：transform:scale(x,y);

类型占据空间影响布局受border-radius影响设置多个值border是是是否outline否否是否box-shadow否否是是有些场景下，需要鼠标悬浮在元素上时，元素边界高亮，为了不引起布局变化（比如border宽度变化，会在视觉上明显反映出来周围元素被排挤），解决方案有如下使用伪元素，较为繁琐。使用outline或box-shadow，因为他们不占空间。

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

css实现三角形是常见的需求，在此记录如下

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

vue 斑马线进度条，渐变进度条。功能：自定义渐变（是否渐变，渐变颜色）自定义斑马线（角度，宽度）自定义百分比位置以及前缀文字、后缀文字自定义动画时间

进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用圆锥渐变时，不同颜色间的衔接处会有明显的锯齿。描述 progress 元素所表示的任务一共需要完成多少工作量，如果不需要进度条渐变，只需要指定渐变颜色为同一颜色即可。，而如果要展示汽车仪表盘当前的速度值，应该使用。）不支持过渡变换的，因此.progress增加。比如，一个需求当前的完成度，应该使用。解决方案：使用CSS@property。存在问题：CSS中，渐变（比如。思路：使用背景色配合百分比。，不会有过渡动画效果。