效果图展示 代码部分 代码说明、注解 使用了 CSS 的一些属性： :after 伪类 position 定位 border-radius 圆角边框 linear-gradient 背景颜色渐变 di

开局一张图 上图所示，多行文本的展开收起是一个很常见的交互效果。 实现这一类布局和交互难点主要一下几点： 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky …

前段时间笔者收到可爱漂亮的小册姐姐的邀请，做了人生首次直播分享。分享主题是《玩转CSS的艺术之美》，跟笔者在9月底发布的掘金小册同名。 9月底发布的玩转CSS的艺术之美，首日预售就达到709本，预售仅三日就破1000本。这也让笔者感到惊讶，没想到CSS技术还是那么受倔友们的欢迎…

想法是使 <textarea> 更像 <div>，因此它的高度可以扩展以包含当前值。这几乎是奇怪的，没有一个简单的原生解决方案，不是吗？ 现在我得到了一个非常好的原生解决方案。 诀窍是，你要准确地将 <textarea> 的内容复制到一个可以自动展…

大家好，我是 Steven。 虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。 这一期，我们就会模仿并且实现这个效果。 打开 CodePen 编辑器 ( htt…

最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。 一栏布局（通栏）头部和底部宽度一…