缺口输入框
CSS双向缺口输入框，带有挖空区域的创意输入框这是一款通过CSS的mask遮罩效果实现的带有缺口圆角的创意输入框，两个带缺口的输入框连接到一起，结合部位放置了双向箭头，可用于输入位置或其他相互之间有交集的文本及符号。
四角边框
HTML中基于CSS实现的4边角彩色圆弧边框这是一款通过纯CSS实现的彩色4角圆弧型边框，基于CSS的遮罩与圆角渐变等属性实现。设计思路：边框元素本身具有透明背景，因此可以透过元素看到背后的图像。此效果使用遮罩层与渐变相结合的技术，在四个...
拖拽边框
HTML中JS实现可拖拽的边框，验证CSS渐变边框与圆角的良好结合这是一款展示CSS渐变边框与圆角（border-radius）配合效果的互动演示，基于CSS技术实现。它证明了使用覆盖方法创建的渐变边框能够很好地适应圆角，而不会像使用border-image那...
纹理背景
HTML结合纯CSS渐变与遮罩效果合成的21种绚丽的卡片背景纹理图案这是一款包含21种绚丽纹理效果的卡片背景图案集合，常见的卡片纹理图案都是基于纯CSS技术实现，利用CSS渐变和遮罩合成技术创造出简单而紧凑的元素卡片背景图案。无需SVG或额外图像资源，仅依靠CS...
旋转加载
SVG + CSS轻量级旋转太阳Loading加载中效果一款外形酷似太阳旋转且具有延迟和渐变遮罩效果的个性预加载器，其中「光线」等素材是通过SVG矢量图实现的，旋转收缩渐变效果是通过CSS实现的。非常轻量级简约的一款Loading加载中动画。
霓虹灯数字
SVG+CSS使用具有遮挡渐变霓虹灯效果的数字时钟基于CSS实现的霓虹灯效果数字时钟，外观超靓丽，其中数字表盘是基于SVG矢量图实现的，遮挡渐变效果的霓虹灯效果数字是通过CSS的渐变（gradient）和遮罩（mask）等关键属性实现的，表的正...
缺角图片
使用 CSS 的 mask 蒙层属性设置 border-radius 实现缺角图片效果使用 CSS 的 mask 遮罩效果，以最少的代码创建倒置半径角。无额外元素、无伪元素、仅使用 CSS 变量进行实现，单个效果如下图所示，您可以在此效果的基础上进行组合再创作实现更多有创意的效果。