前言 今天我们来分享一款非常有趣的登录界面，它使用HTML和CSS制作，具有动态的水波纹效果，让用户在登录时感受到了一股清凉之感。

本文已参与「新人创作礼」活动，一起开启掘金创作之路 for (var i=1; i<=5; i++) 加 setTimeout 如何输出1、2、3 、4、5 大家在笔试或者面试的时候，或多或少都做过这

一、什么是层叠上下文 层叠上下文（stacking context）： 其实就是我们虚构的一个概念，就像是我们看页面的时候，你看着好像只有一层，其实有很多层。如果是层叠上下文的元素，就拥有优先接近我们

最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…

如图，一条线上的标题 很多地方都可以看到这样的标题，1px的线条和文字标题在中间样式的效果图，今天整理了一下，给需要的朋友 在手机电脑上都适用，有更好的实现方法可以来讨论哦

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率…

我们知道在写移动端页面时，有个经典的1px问题。该问题的原因是：在pc端的设计稿拿到移动端会产生视觉上的放大，解决该问题的方案就是将1px缩小为0.5px。 解决方法 1.直接写0.5px，不兼容。

当用伪类的绝对定位实现了边框0.5px后，我们在test1类上的点击事件会失效，因此此时的伪类是绝对定位，而且长宽等于父类元素的长宽，是脱离了文档流覆盖在父类上的，伪类不是真实的DOM元素。 `linear-gradient`默认方向从上到下，从0deg到50%的地方颜色是边框…

最近，有同学询问，如何使用 CSS 实现如下效果： 看起来是个很有意思的动效。 仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 -- background-clip: text。 有意思的