CSS 学习笔记

概要

记录未接触到的、易忘的 CSS 知识点

pointer-events

给元素样式添加 pointer-events: none; 可以屏蔽鼠标点击事件

对 SVG 元素支持属性值会很多

常用值：

auto：默认
none：屏蔽鼠标点击事件

clip-path

用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏

常用值：

clip-source：用 url() 引用 SVG 的 <clipPath> 元素
basic-shape
- inset(span round border-raidus)：通过设置离四边的间距、圆角大小来 “矩形” 裁剪元素
- circle(r at o)：通过设置圆的半径和圆心（可省略）来 “圆形” 裁剪元素内容，默认圆心在中间
- ellipse(r1 r2 at 0)：通过设置圆的 x 半轴长、y 半轴长来 “椭圆形” 裁剪元素内容，默认圆心在中间
- polygon(pointX1 pointY1, pointX2 pointY2, ...)：通过设置一组顶点来 “多边形” 裁剪元素
- path()：通过设置 SVG path 路径来 “任意形状” 裁剪元素
geometry-box：如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒
- margin-box：使用 margin box 作为引用框
- border-box：使用 border box 作为引用框
- padding-box：使用 padding box 作为引用框
- content-box：使用 content box 作为引用框
- fill-box：利用对象边界框（object bounding box）作为引用框
- stroke-box：使用笔触边界框（stroke bounding box）作为引用框
- view-box：使用最近的 SVG 视口（viewport）作为引用框
none：不创建裁剪路径

inset

top、right、bottom、left 属性的简写，写法和 margin 类似

display: grid

网格布局

place-items

是 align-items、justify-items 属性的简写，可以在 grid、flex 布局中使用

开启 GPU 加速

css

.use-gpu {
    transform: translate3d(0, 0, 0);
}

参考：https://lz5z.com/Web%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-CSS3%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F/

text-underline-offset

文本装饰下划线与原始位置的偏移距离

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-underline-offset