好文推荐

写`CSS`特效的常用套路

访问链接

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。

灵活运用66个实用`CSS`开发技巧

访问链接

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

你未必知道的49个`CSS`知识点

访问链接

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。

hr标签实现分隔线如何玩出花

访问链接

疏密可控的虚线

这里使用线性渐变模拟虚线效果，优点是虚线的虚实比例是可以精确控制的，实现原理和细节以前介绍过，可参见“CSS3 linear-gradient线性渐变实现虚线”一文。

现在有如下所示的HTML和CSS代码：

<hr class="hr-dashed-fixed" style="--dashed-filled: 6px; --dashed-open: 5px;">

.hr-dashed-fixed {
    border: 0;
    padding-top: 1px;
    /* for 现代浏览器 */
    background: repeating-linear-gradient(to right, #a2a9b6 0 var(--dashed-filled, 4px), transparent 0 calc(var(--dashed-filled, 4px) + var(--dashed-open, 6px)));
}