秋月何时了，CSS3 border-radius知多少？
作者从万圣节的轻松话题切入，深入探讨了CSS3 `border-radius` 的进阶用法与底层机制。文章首先指出私有前缀已成过去式，随后重点剖析了百分比值的计算基准——它并非相对于 `width`/`height`，而是元素最终的占据尺寸（包含 `border` 和 `padding`）。因此，用 `border-radius: 50%` 可以轻松为正方形元素制作完美圆形头像。 更有趣的是对“大值特性”的对比实验：当给一个非正方形元素设置一个极大的固定值（如300px）和使用50%时，会产生完全不同的视觉效果——前者因半径过大被浏览器限制，形成“操场跑道”式的椭圆角，而后者则是标准的“马桶盖子”状。这揭示了固定值与百分比值在不同场景下的关键差异。 文章后半部分详细拆解了 `border-radius` 简写背后的八个值（水平与垂直半径），并通过交互式Demo直观展示了每个值如何共同控制每个角落的圆弧形状。对于想要超越基础用法、真正掌握CSS圆角机制的前端开发者来说，这篇内容提供了扎实的原理辨析和实用参考。
CSS深入理解vertical-align和line-height的基友关系
这篇技术文章用生动的方式剖析了CSS中vertical-align和line-height这两个属性的内在关联。作者从图片下方常出现的意外空白间隙问题出发，揭示了这一现象的根本原因：图片默认以基线对齐，而基线的位置由行高（line-height）决定，因此间隙实际上是两者共同作用的结果。 文章深入解释了vertical-align的百分比值并非基于字体大小，而是直接相对于line-height计算，这是两者存在紧密联系的核心证据之一。为帮助理解，作者提出了“幽灵空白节点”的概念，即在HTML5声明下，块状元素内部的内联元素行为，仿佛存在一个看不见的空白节点，其高度由line-height撑开，从而影响vertical-align的对齐计算。 基于此原理，文章指出了消除间隙的两种主要思路：一是通过display:block等方式使vertical-align失效；二是直接控制line-height的值。这种从具体问题入手，逐步拆解底层机制的讲解方式，为理解和解决CSS中复杂的垂直对齐问题提供了清晰的思路。
-webkit-border-radius圆角属性
这篇文章聚焦于 CSS 中的 `-webkit-border-radius` 圆角属性，详细拆解了其语法、参数和实际应用中的注意事项。作者从基础语法讲起，说明了属性值可以是单个长度（形成四角相等的圆角），也可以是“水平半径 / 垂直半径”的形式（形成椭圆角）。 文章特别强调了使用的细节和兼容性问题。例如，该属性支持动画；参数取值范围广泛，支持各种长度单位；并且提醒读者注意书写方向（如 `tb-rl`）对参数顺序的影响，在某些浏览器中顺序会反转。此外，作者指出这份参考手册主要针对 `-webkit` 内核浏览器，如果需要兼容其他内核，还需查阅其他资料。 文中还穿插了一个在 Chrome 开发版中遇到的有趣 bug，并附有简单的代码示例，让讲解更具体。整体而言，这是一篇实操性很强的属性指南，为前端开发者提供了清晰的使用参考。
使用yuicompressor.jar实现对js、css文件的代码压缩
这篇文章提供了一套基于 YUI Compressor 的完整前端资源压缩方案。作者从实际需求出发，介绍了如何利用这个基于 Java 开发的 jar 文件，高效地将 JS 和 CSS 文件体积压缩至接近原文件的一半。 文章不仅讲解了基本的命令行用法，更核心的是分享了一个可直接使用的 Java 工具类代码。这个工具类能够递归遍历指定目录，自动识别所有 `.js` 或 `.css` 文件（排除已压缩的 `-min` 文件），并批量生成压缩命令进行处理。使用者只需修改 `yuiPath`、`filePath`、`fileType` 和 `encoding` 四个参数，就能轻松完成整个项目的资源压缩工作。 文末附上了工具的下载地址和具体的参数说明，方便读者即刻上手实践。这是一份从工具介绍到自动化实践，步骤非常清晰的实用指南。
小tip: 了解CSS text-decoration新特性新表现
这篇讲的是CSS里大家用惯了的text-decoration属性，其实远不止下划线、删除线那么简单。作者从常见的链接下划线、商品原价删除线出发，先回顾了CSS2.1时代那些略显“古早”的取值：比如几乎没人用的上划线（overline）和已被浏览器抛弃的闪烁（blink）。 真正的升级来自CSS3。text-decoration不再是一个单打独斗的属性，它演化成了一系列属性。其中，text-decoration-style解锁了虚线、点线、双线、波浪线等新线型；text-decoration-color让我们终于能单独控制装饰线的颜色，告别“线条只能跟文字同色”的时代。 文章尤其探讨了text-decoration-skip这个颇具巧思的属性，它能控制装饰线是直接穿透字符和图片，还是智能地“跳过”它们（如ink模式）。尽管目前浏览器支持度有限，但作者也指出了Safari已默认采用了类似ink的行为，并提供了重置方法。文末附有完整的演示代码，能让你直观感受这些新旧特性的表现差异。
CSS3 transform对普通元素的N多渲染影响
这篇讲的是CSS3 transform如何在“表面无恙”的情况下，给普通元素带来一系列深远的渲染影响。作者从几个经典场景出发，演示了transform会如何悄无声息地改变元素的行为规则。 例如，给元素添加`transform: scale(1)`这样看似无意义的属性，却能让它像设置了`position: relative`一样，提升垂直地位并覆盖后面的兄弟元素。它还能“降服”`position: fixed`，使其固定定位效果在包含`transform`的父容器中失效，降级为`absolute`。此外，transform也会影响`overflow`对绝对定位元素的裁剪规则，以及改变`width: 100%`的计算基准。 文章通过清晰的示例和代码，揭示了这些容易被忽视的特性及其在不同浏览器下的细微差异，对前端开发者排查布局陷阱非常有实用价值。
HTML页面布局基础
这篇讲的是CSS布局中两个最基础也最容易踩坑的概念：盒子模型和定位。作者坦言，虽然大家都知道这些知识，但实际开发中总会在细节上翻车。 文章首先拆解了盒子模型。标准盒子模型中，元素宽度仅指内容区；而怪异模式（IE盒子模型）下，宽度则包含了内边距和边框。CSS3通过`border-sizing`属性让你可以自由切换：默认是`content-box`（标准），设为`border-box`则进入怪异模式。作者附上了直观的代码和效果对比图，清晰展示了两种模式下实际渲染尺寸的差异。 定位部分则聚焦于`position`属性。重点区分了相对定位和绝对定位：相对定位元素会“赖在”原文档流位置不走，只是视觉上偏移；绝对定位则彻底“脱离队伍”，其位置由最近的非`static`祖先决定。文章通过代码示例和截图，演示了普通流、相对定位与绝对定位下元素布局的动态变化，特别是绝对定位如何通过`z-index`控制层叠顺序。 整体来看，这是一篇针对前端开发者常犯细节错误的实用回顾，用对比的方式把基础概念讲透了。
BFC(Block formatting contexts)初探
这篇讲的是前端开发中一个常见但容易模糊的概念——BFC（块级格式化上下文）。作者从自己面试和开发中遇到的困惑出发，系统梳理了BFC的定义、核心布局规则以及触发条件。 文章没有停留在理论，而是重点通过三个经典案例，演示了BFC的实际作用：如何利用它实现自适应两栏布局、有效清除内部浮动，以及防止外边距（margin）的垂直重叠。这些例子直指日常开发中的痛点，比如浮动带来的高度塌陷问题。 作者最后总结了关键点：BFC本质上是一个隔离的独立容器，其内外元素互不影响。理解这一点，就能明白为何BFC能解决上述布局难题。对于前端开发者而言，这篇文章能帮助理清BFC这个“既熟悉又陌生”的概念，并将它切实应用到解决实际问题中。
小tip: 纯CSS实现视差滚动效果
这篇讲的是一个有趣的纯CSS技巧：实现视差滚动效果。作者从“视差滚动通常依赖JavaScript或插件”这个普遍认知出发，探讨了在不考虑IE兼容性的前提下，如何仅用几行CSS代码达成同样炫酷的效果。 核心实现思路巧妙地运用了CSS 3D的属性。作者在容器上设置`perspective`来建立3D视角，再对需要“慢速滚动”的背景元素应用`transform: translateZ(-1px) scale(2)`。这里的-1px与scale(2)是关键，它们共同制造了一种视觉错觉：虽然元素因Z轴位移在视觉上缩小了（如原文比喻的“近大远小”），但通过放大两倍补偿了这种缩小，使得在平面视角上看不出变化。然而，当页面滚动时，其位移速度自然与前景元素形成差异，从而产生视差感。原文用“电瓶车看月亮”的比喻很形象地说明了这一原理。 文章最后也提到了该技巧的适用边界，比如对直接body滚动效果不佳。对于想用最轻量级代码增加页面动态感，且无需支持老版本IE的项目来说，这个“解密”后的CSS小魔法提供了一个非常实用的思路。
CSS中height:100%和height:inherit的异同
这篇讲的是CSS中`height:100%`与`height:inherit`看似简单却容易被忽略的差异。作者从日常编码中的一个小吐槽切入，对比了两者的兼容性与核心行为。 多数情况下，两者表现一致：父容器定高时继承相同高度，父容器高度为auto时则同为auto。但真正的关键差异出现在子元素为绝对定位，且父容器未设置定位（position为static）的场景。此时，`height:100%`会寻找已定位的祖先元素，导致高度计算异常；而`height:inherit`则忠实地继承父元素的高度，即使父元素没有定位特性。 文章附带的在线演示清晰地展现了这种区别：使用`height:100%`的元素“深入地域”，而使用`height:inherit`的元素则完美自适应父级。这个特性在避免复杂布局中滥用`position: relative`以防止层级混乱时，显得尤为实用。
小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现
这篇讲的是如何在老版本IE浏览器中实现元素居中缩放的问题。当CSS3 `transform`尚不可用时，IE的`zoom`或`Matrix`滤镜会改变元素的原始尺寸和位置，导致缩放时无法像现代浏览器一样以中心点为基准，开发者不得不手动计算繁琐的偏移值。 文章提出了一种巧妙的“广阔海洋”布局方案来解决这个问题。其核心思路是：在外层可视容器内部，构建一个尺寸远大于自身的绝对定位容器（“海洋”），并通过`margin`负值将其精确居中。这样一来，需要缩放的元素在这个“海洋”里同样实现居中定位后，无论进行`zoom`还是`Matrix`变换，视觉上都能保持中心点不变。 作者通过代码示例和效果对比清晰地展示了方案的有效性。在IE8等浏览器下，传统方法会导致图片从左上角放大，而运用此技术后，hover缩放效果就能与现代浏览器保持一致的中心点放大。对于旋转等其他矩阵变换，该布局策略同样适用，为低版本IE的兼容性开发提供了一个简洁且实用的解决思路。
内容loading加载后高度变化CSS3 transition体验优化
这篇讲的是如何用一行代码优化动态内容加载时的高度过渡体验。作者从常见的加载场景出发，敏锐地指出了一个普遍但容易被忽略的体验问题：当内容（尤其是高度不确定的动态内容）突然呈现时，那种“砰砰砰”的生硬切换，与流畅的动画过渡相比，显得格外突兀。 文章的核心挑战在于，CSS3 transition无法直接将高度从一个固定值动画到 `auto`。为了解决这个难点，作者提供了一个仅十行左右的 JavaScript 函数 `funTransitionHeight`。其巧妙之处在于，它通过快速读取内容变为 `auto` 后的高度，再立即设回原高度作为起始值，最后在 `setTimeout` 中将高度设置为目标值，从而“欺骗”浏览器触发了平滑的 `height` 过渡动画。 整个方案的实操性非常强，只需在内容载入后增加一次函数调用即可生效，实现了低成本的体验提升。效果上，原本生硬的高度变化被流畅的伸展动画所替代，让交互过程变得更加自然舒适，符合现代前端对细节体验的追求。
[译文]使用 Mojo::DOM 来解析和处理 HTML
这篇译文探讨了一个Perl开发者常会遇到的问题：如何优雅地解析和操作HTML。文章作者明确反对使用正则表达式这类“笨办法”，转而推荐Mojo::DOM这个模块，并细致地展示了其优越性。 文章从核心痛点出发，解释了直接操作文本的低效与脆弱。作者演示了Mojo::DOM如何通过更接近前端开发思维的CSS3选择器来定位元素，这比记忆和编写复杂的XPath要直观得多。全文以一个实际任务——从CPAN作者页面提取模块列表——为主线，手把手展示了从获取DOM对象、用`find`方法查找元素，到利用`map`、`attr`、`grep`等方法进行链式处理和过滤的全过程。这种流畅的方法链风格，让数据处理的逻辑清晰地呈现出来。 最终，文章不仅解决了“如何解析”的问题，更示范了如何将原始HTML精准地转化为一个干净、结构化的Perl数据结构。对于任何需要用Perl处理网络数据或本地HTML文件的开发者来说，这篇文章提供了一个清晰、实用且现代化的工具使用指南。
CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇讲的是CSS布局中一个经典而重要的话题：如何利用元素的基础特性来构建灵活的多栏自适应页面。作者没有去罗列一堆实现方法，而是深入剖析了两种底层原理——块状元素的“流体特性”与“BFC（块级格式化上下文）特性”，并对比了它们在自适应布局中的实际表现与差异。 文章首先解释了什么是流体特性：块状元素默认会自动填满容器，但其内容区域会响应margin、padding或border而变窄。利用这一点，配合浮动或绝对定位，就能做出左定宽、右自适应的布局。但作者也指出，这种方法的不足在于，开发者必须精确知道固定栏的尺寸，才能设置对应的间距，缺乏灵活性和复用性。 于是，文章的重点转向了BFC特性。当元素触发BFC（例如设置`overflow: hidden`）后，它会生成一个独立的格式化区域。关键在于，当这个BFC元素与浮动元素相邻时，它会自动避开浮动元素的区域，但依然保留填满剩余空间的流体特性。这便催生了更智能的解决方案：只需给浮动元素设置`margin-right`，BFC元素就能自动适应并保持间距，无需关心其具体宽度。 作者总结道，相比于纯流体布局，BFC自适应模块更加健壮、容错性更强，并且可以抽象成像`.ovh`（设置`overflow: hidden`）这样的通用类，在整个项目中复用，真正实现了布局的解耦和高效。文章通过代码示例和形象比喻，清晰地传达了BFC这一特性在解决实际布局问题时的巧妙与实用。
table-cell的手机应用场景
作者从CSS垂直居中这个常见需求切入，对比了包括margin负值、position+margin在内的多种传统方案。这些方法往往需要预先知道元素高度，或在内容溢出时出现布局问题，对于移动端尤其是内容动态的H5页面来说并不友好。 文章重点介绍了display:table-cell这个被许多人忽略的属性值。它在PC端因兼容性问题（仅支持IE8+）而鲜少使用，但在移动端现代浏览器环境下，反而能发挥独特价值。该属性使元素表现得像表格单元格（td/th），配合父元素设置为display:table和vertical-align:center，可以实现真正的、内容自适应的垂直居中，且无需依赖固定高度。 作者通过代码示例和效果对比指出，table-cell更适合单列布局，多个元素使用时会像表格单元格一样并排显示，margin属性也会失效。因此，它尤其适用于移动端全屏单页应用的垂直居中场景，为开发者提供了一个在特定环境下更灵活、简洁的布局思路。
css3:背景属性background-origin/clip详解
这篇文章深入讲解了CSS3中两个容易被混淆但十分实用的背景属性：背景裁剪（background-clip）与背景起点（background-origin）。作者从边框、填充和内容三个盒子模型的角度，清晰剖析了它们如何分别控制背景的“绘制区域”与“定位起点”。 文章指出，`background-clip` 负责决定背景（颜色或图片）最终呈现的边界，相当于对背景画布进行裁剪；而 `background-origin` 则决定了背景图片从哪个参考点开始铺排。虽然两者都使用 `border-box`、`padding-box` 和 `content-box` 这三个相同的属性值，但表达的含义截然不同。作者通过“给桌子铺桌布”的生动比喻，帮助读者理解 `origin` 作为铺布起点的含义。 文中还特别强调了两个实用注意点：一是当使用 `background-attachment:fixed` 时，`origin` 属性将失效；二是在元素有非零边框宽度时，结合不同的 `clip` 和 `origin` 设置，会导致背景图片的可见区域产生差异。文章最后坦言，这两个属性在实际开发中或许不常用，但在设计上确实需要精细控制背景与边框关系的场景下，它们便能派上用场。
小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
这篇讲的是前端开发中一个很常见但恼人的体验问题：当页面内容动态加载导致滚动条出现时，采用 `margin: 0 auto` 的水平居中布局会发生“跳动”。作者指出，传统的解决方案，如直接给 body 加 `overflow-y: scroll`，虽然能阻止跳动，但会在内容未超一屏时强行显示一个丑陋的滚动条，破坏了现代浏览器的视觉设计。 文章的核心亮点在于，利用 CSS3 的 `calc` 计算函数和视口单位 `vw`，提供了一个极其简洁的纯 CSS 解决方案。只需在主体的父容器上添加一行 `margin-left: calc(100vw - 100%);`，即可让页面在任何情况下（包括滚动条出现或消失时）都保持居中，且滚动条仅在内容确实溢出时才自然出现。 作者详细解释了原理：`100vw` 包含了浏览器视口的完整宽度（含滚动条），而 `100%` 是元素的可用宽度（不含滚动条），两者之差恰好就是滚动条的宽度。这个方案兼容 IE9+ 及现代浏览器，并且作者还贴心地给出了在窄屏幕下可能需要添加媒体查询进行响应式处理的建议。对于追求页面平滑与布局稳定的前端开发者来说，这是一个非常实用且优雅的技巧。
图片动态局部毛玻璃模糊效果的实现
作者从一个可拖动的模糊方块效果出发，拆解了“图片动态局部毛玻璃”这一视觉特效的核心实现。原理很直观：用一个带有模糊滤镜（CSS3 `filter: blur()`）的局部覆盖层，叠放在原始清晰背景图之上，拖动覆盖层即可实现动态局部模糊。 关键难点在于如何让模糊层与背景图精准对齐，文章给出了两种巧妙方案：一是通过JavaScript动态计算并调整覆盖层的 `background-position`；二是利用 `background-attachment: fixed` 的特性让背景图相对视口固定，从而免去计算，但后者仅适用于无滚动的场景。文章进一步展示了该技术在文字模糊、以及模拟iOS毛玻璃效果中的潜力。 最后，作者提供了一个全兼容（支持IE7+及现代浏览器）的实战案例——百度图片首页的局部动态模糊，并分享了其利用SVG `foreignObject` 将页面内容转换为图片来实现更复杂模糊效果的思路。
小tip:CSS计数器+伪类实现数值动态计算与呈现
这篇讲的是如何用纯CSS实现动态计数和计算，完全不需要JavaScript的参与。作者从CSS计数器的基本用法出发，展示了它与伪类（如`:checked`）结合后产生的有趣化学反应。 文章通过两个具体Demo来演示这种能力：第一个是一个“冰淇淋选择器”，页面会实时显示你勾选了多少种；第二个是一个数值计算小游戏，只有当复选框组合的运算结果恰好为72时，才会显示成功提示。这两个案例都仅依靠HTML结构、CSS计数器（`counter-reset`与`counter-increment`）以及选择器的状态判断来完成。 核心实现原理很精巧：通过为不同的复选框状态设定不同的计数增量（例如+64、-32），让计数器承担了“累加器”的职责。再利用相邻兄弟选择器和`:checked`状态组合，就能在CSS层面“判断”出最终的运算结果是否符合预期，并据此改变呈现内容。这相当于在样式层实现了基础的逻辑判断，展现了CSS在交互潜力上的另一面。
table-cell的手机应用场景
这篇讲的是如何利用一个有点“过气”的 CSS 属性 `display: table-cell` 来解决移动端开发中棘手的垂直居中问题。作者从一篇老文章出发，重新审视了 `table-cell` 在当前移动场景下的价值。 文章先盘点了传统的垂直居中方案，如 `position` 配合负 `margin`，虽然兼容性好但必须预先知道元素高度，内容超出时容易“走光”。作者指出，这些方案在需要内容自适应垂直居中的移动 H5 页面里显得力不从心。 核心方案在于利用 `table-cell` 模拟表格单元格的行为。只需父元素设为 `display: table`，子元素设为 `display: table-cell` 并加上 `vertical-align: middle`，就能让内容在容器内完美垂直居中，无需知晓具体高度。作者还分享了一个关键的踩坑经验：必须避免在 `table-cell` 元素上同时使用 `position` 定位，否则效果会失效。 总的来说，这篇文章为移动端，特别是单屏滚动的 H5 活动页开发，提供了一个轻巧、可靠的垂直居中思路，非常适合那些对布局高度自适应有要求的场景。