水平垂直居中深入挖掘
- 2021 年 1 月 8 日
- 筆記
在上篇文章 -- 一行 CSS 代码的魅力 的最后，提到了两种快速实现水平垂直居中的方式。 当然，CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利弊。 嗯哼？也就是： 那么多 …
Continue Reading
一行 CSS 程式碼的魅力
- 2021 年 1 月 6 日
- 筆記
之前在知乎看到一个很有意思的讨论 一行代码可以做什么？ 那么，一行 CSS 代码又能不能搞点事情呢？ CSS Battle 首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是： 官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它 …
Continue Reading
使用純 CSS 實現滾動陰影效果
- 2021 年 1 月 4 日
- 筆記
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样： 可以看到，在滚动的过程中，会出现一条阴影： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 positi …
Continue Reading
使用 tabindex 配合 focus-within 巧妙實現父選擇器
- 2020 年 10 月 30 日
- 筆記
本文将介绍一个不太实用的小技巧，使用 tabindex 配合 :focus-within 巧妙实现父选择器。 CSS 中是否存在父选择器？ 这是一个非常经典的问题，到目前为止，CSS 没有真正意义上被广泛实现的父选择器，这和浏览器的渲染机制有关。 如果你对 CSS 中是否存在父选择器有疑惑，可以去看 …
Continue Reading
CSS 技巧一則 -- 不定寬溢出文本適配滾動
- 2020 年 7 月 27 日
- 筆記
在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中： 这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 hover 时弹出框提 …
Continue Reading
奇妙的 CSS MASK
- 2020 年 7 月 6 日
- 筆記
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗 …
Continue Reading