YieldRay

几个css小技巧

November 19, 2022

翻译自：https://markodenic.com/css-tips/，部分省略

打字特效

原理参见：https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/

平滑滚动

本例核心为

css

html {
    scroll-behavior: smooth;
}

https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%e5%b9%b3%e6%bb%91%e6%bb%9a%e5%8a%a8/

文本截断

核心在于

css

.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

参见：https://developer.mozilla.org/docs/Web/CSS/text-overflow

目前仅 webkit 内核支持 line-clamp 属性，可以把 块容器 中的内容限制为指定的行数。

参见：https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp

css

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 上面的两个属性必须指定，否则-webkit-line-clamp无效 */
    -webkit-line-clamp: 3; /* 裁剪为3行 */
    overflow: hidden;
}

`::selection` 伪元素

::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

参见：https://developer.mozilla.org/docs/Web/CSS/::selection

css

.custom-highlighting::selection {
    /* 只有一小部分 CSS 属性可以用于::selection 选择器，具体请参见 MDN */
}

纯 CSS 模态窗

参见：https://developer.mozilla.org/docs/Web/CSS/:target

灵活使用:target伪类，可以实现诸如显示/隐藏屏幕侧边栏的效果
但由于会修改 URL 锚点，在某些情况下（如 hashRouter）就无法使用了

`:empty` 伪类

:empty 伪类在样式化占位内容时很实用

参见：https://developer.mozilla.org/docs/Web/CSS/:empty

Scroll Snap

参见：
scroll-snap-type
scroll-snap-align
scroll-snap-stop

https://www.zhangxinxu.com/wordpress/2018/11/know-css-scroll-snap/

光标颜色

caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

参见：https://developer.mozilla.org/docs/Web/CSS/caret-color

`:in-range` 和 `::out-of-range` 伪类

参见：
:in-range
:out-of-range

自定义边框

核心在于

css

.gradient-border {
    border: solid 5px transparent; /* 颜色需定义为透明 */
    background-origin: border-box;
    background-clip: content-box, border-box;
}

参见：
background-clip background-origin

下面的是原文没有的

aspect-ratio

参见：https://www.zhangxinxu.com/wordpress/2021/02/css-aspect-ratio/

aspect-ratio：https://developer.mozilla.org/docs/Web/CSS/aspect-ratio aspect-ratio 媒体查询：https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio

backdrop-filter 滤镜

filter 是作用在元素本身上的滤镜，backdrop-filter 则作用在元素 z 轴后面的部分

参见：https://developer.mozilla.org/docs/Web/CSS/backdrop-filter

使用滤镜需考虑性能问题，可以通过 transform:translateZ(0) 和 will-change 开启 GPU 加速

clip-path

https://developer.mozilla.org/docs/Web/CSS/clip-path

mix-blend-mode/background-blend-mode

https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode
https://developer.mozilla.org/docs/Web/CSS/background-blend-mode
https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/

mask

https://developer.mozilla.org/docs/Web/CSS/mask
https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/

object-fit/object-position

object-fit 属性指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框。

https://developer.mozilla.org/docs/Web/CSS/object-fit

object-position 属性规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景（background）。

https://developer.mozilla.org/docs/Web/CSS/object-position

offset

offset 属性可以使元素沿着不规则的路径移动

https://developer.mozilla.org/docs/Web/CSS/offset

overscroll-behavior

overscroll-behavior 指定滚动嵌套时的表现

https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior
https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/

rotate/scale/translate

这些属性可以单独声明 transform 变换（独立于 transform 属性），避免了 transform 属性的使用

https://developer.mozilla.org/docs/Web/CSS/rotate
https://developer.mozilla.org/docs/Web/CSS/scale
https://developer.mozilla.org/docs/Web/CSS/translate

gap/column-gap/row-gap

可以单独设置行或列的间距

https://developer.mozilla.org/docs/Web/CSS/column-gap
https://developer.mozilla.org/docs/Web/CSS/row-gap

shape-outside/shape-margin

shape-outside 可以指定一种形状，相邻的行内（inline）元素围绕该形状换行

https://developer.mozilla.org/docs/Web/CSS/shape-outside

shape-margin 属性可以设定 shape-outside 创建的 CSS 形状的外边距

https://developer.mozilla.org/docs/Web/CSS/shape-margin

user-select

user-select 属性控制用户选中文本的行为

https://developer.mozilla.org/docs/Web/CSS/user-select

vertical-align

vertical-align 属性用于指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

https://developer.mozilla.org/docs/Web/CSS/vertical-align

←Back to home

This work is licensed under CC BY-NC-SA 4.0

▲