兴杰(stooges.com.my)

摘要： 前言 CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 one line, 遇到多行的时候只能用 JS. 后来出了 line-clamp 终于把 multiple line ellipsis 解决了. 参考: stackoverflow – Limit te 阅读全文

摘要： 前言 要让一个元素 "消失"，有 4 种做法。它们有一点点的不同，在实战时要清楚什么时候用什么哦。 例子说明 <div class="abc"> <div class="xyz"></div> </div> CSS Style .abc { border: 1px solid red; width: 阅读全文

摘要： 参考: stackoverflow – Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none? 思路和难点 最简单的思路就是 opacity 0 到 1 阅读全文

摘要： 参考: Youtube – CSS Variables - CSS vs Sass - variables inside media queries Why we prefer CSS Custom Properties to SASS variables 与 Sass Variables 的区别 阅读全文

摘要： 效果 效果来自: webflow 的一个模板 需求解释 有 3 给元素, 图片, overlay(黑影), link mouse enter 的时候, 图片要 zoom in. overlay 要 fade in. link 要 slide up mouse leave 的时候, 图片 zoom o 阅读全文

摘要： 前言 之前写的 W3Schools 学习笔记 (3) – CSS 2D Transforms. 这篇作为整理. 参考: Youtube – Learn CSS Transform In 15 Minutes Demo Structure <div class="frame"></div> <div 阅读全文

摘要： 前言 之前写过一些: W3Schools 学习笔记 (2) – CSS Image Sprites W3Schools 学习笔记 (3) – CSS Styling Images & CSS Multiple Backgrounds 这篇作为整理. Styling img default behav 阅读全文

摘要： 前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理. 参考: Youtube – Advanced CSS Border-Radius Tutorial W3C – Rounded Corners 正文 以长方形作为例子比较容易理解. normal us 阅读全文

摘要： 参考: Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features! MDN – aspect-ratio W3Schools – How TO - Aspect Ratio W3C – Aspect Ratios 阅读全文

摘要： 参考: 掘金 – 如何更愉快地使用em —— 别说你懂CSS相对单位 绝对值 vs 相对值 px, cm, mm 这些是绝对值. rem, em 是相对值. 绝对值就是最终的尺寸. 相对值的意思是它不是最终值, 它依赖另一个变量去决定最终值. 比如 font-size: 16px 那么最终值就是 1 阅读全文