IT
2015-01-24 23:46:35
/
累计浏览 2,712
这篇讲的是CSS3字体属性中一个让人“蛋疼”又离不开的话题：iconfont和@font-face。作者从网页内容的主体——文字说起，直指@font-face这个能让你彻底摆脱用户系统字体限制的关键属性。文章没有停留在浅层介绍，而是深入拆解了@font-face的语法，逐项解释了font-family、src、unicode-range等参数，并用一个清晰的表格展示了IE、Firefox、Chrome等主流浏览器对不同字体格式（如.eot, .ttf, .woff）的支持情况。更关键的是，它厘清了@font-face与iconfont之间相辅相成的关系：一个负责引入自定义字体，一个负责将图标集打包成字体以便调用。文中提供的兼容性写法代码，对处理多浏览器环境下的字体加载问题直接提供了实用参考。
IT
2015-01-22 23:35:31
/
累计浏览 3,094
这篇讲的是如何用纯CSS3“画”出一个七巧板。作者从项目需求出发，对比了Canvas、SVG等方案后，最终选择了更轻量、兼容性好的CSS3作为实现路径。
核心思路是用CSS的border属性来构建三角形、正方形和平行四边形这三种基本形状，再通过transform属性（包括translate、rotate、skew）将它们精确地平移、旋转和变形，拼合到指定位置。文章特别提到了利用CSS预处理器LESS，通过定义一个基础长度变量来控制整体尺寸，极大地提升了代码的可维护性和灵活性。
文中还包含了具体的代码片段和效果展示，甚至延伸到了使用CSS3动画让七巧板“动起来”的可能。它展示了前端如何用基础技术，实现一个充满趣味和传统文化味的小项目。
IT
2015-01-22 23:29:37
/
累计浏览 2,967
这篇文章聚焦于CSS的渲染性能，作者从日常编码中常见的写法入手，剖析了10种可能导致浏览器渲染变慢的习惯。
文章开篇就直指通配符选择器`*`的滥用，它会遍历所有标签，是性能的一大隐患。接着，作者犀利地指出了IE滤镜（如实现灰色效果的`filter: gray`）的高资源消耗问题，并以汶川地震时大量网站变灰导致CPU飙升的实际案例佐证。此外，诸如过度使用绝对定位、背景图片平铺策略不当、CSS选择器路径过深等影响渲染链效率的写法，也都被一一拆解。
对于每个问题，作者都提供了务实的替代方案，比如针对通配符，建议改为对常用标签（body, li等）单独重置；对于背景平铺，则建议将色彩少的图片制成尺寸稍大的GIF格式。文章强调，合理的布局和让属性通过继承传递，能从根本上优化渲染路径。这些经验之谈，源于作者在真实项目中遇到的性能瓶颈，为前端开发者提供了清晰的避坑指南。
IT
2015-01-22 23:28:52
/
累计浏览 1,907
这篇讲的是CSS布局从“一团糟”到初现曙光的演进史。作者从早年开发者们不得不依赖表格、浮动和inline-block这些“hack”方法来实现多列布局说起，深入剖析了其中的核心痛点：浮动需要 clearfix、盒模型计算导致宽度溢出、以及为列间距疲于奔命。
文章并未停留在抱怨历史，而是把重点放在了CSS3带来的三把“钥匙”上。它逐一演示了如何用 `box-sizing: border-box` 让宽度计算回归直觉，如何用 `calc()` 函数在百分比中精确扣除间距，以及 Flexbox 如何以更声明式的方式简化对齐与分布。每个方案都附带了清晰的代码示例和效果对比，直观展示了布局效率的提升。
当然，作者也没有回避现实。他指出 `border-box` 仍需搭配浮动，`calc()` 依赖负外边距这种老技巧，而 Flexbox 虽好却受制于当时的浏览器支持。这种客观的对比，让读者能清醒地认识到每个工具的适用边界。对于正挣扎于布局细节的开发者而言，这篇文章清晰地指明了哪些新特性值得立即投入学习，以及它们能实实在在解决哪类历史问题。
IT
2015-01-21 23:42:04
/
累计浏览 2,913
这篇文章重新审视了 CSS 的 border 属性，作者指出它远不止 `1px solid black` 这么简单。文章从最基础的复合属性与单属性拆分讲起，重点展示了拆分属性（如 `border-color`）在状态切换时的优雅之处，并为后文的高级技巧埋下伏笔。
核心篇幅则聚焦于 `border-radius` 这一 CSS3 特性。作者不仅回顾了其基本用法和分角设置，更演示了如何通过组合不同角的圆角值，创造出如“柠檬”形状这样的自定义图形，摆脱了对背景图像或切图的依赖。这部分内容生动体现了 CSS 的设计潜力。
在扩展部分，文章开始介绍边的更多玩法，例如设置不同的边框样式（`border-style`）。整体而言，这篇“重温”不仅巩固了基础，更揭示了简单属性背后的灵活创造力，让读者对这个最熟悉的属性有了新的认识。
IT
2015-01-20 23:22:01
/
累计浏览 3,351
这篇讲的是作者对CSS3动画核心概念的温故知新，重点厘清了新手容易混淆的两大类型：Transition（过渡）和Animation（动画）。
文章开篇从个人经历切入，指出CSS3动画从早期仅Webkit支持，到如今已成为前端必备技能。核心对比在于：两者都是实现平滑变化的“补间动画”，但控制精度不同。Transition像是一个简单的“开始-结束”开关，你只能定义起点状态、终点状态以及中间的耗时和速度曲线，适合实现类似“hover时颜色渐变”这类单一段落的变化。
而Animation则提供了更强大的分段控制能力。通过定义关键帧（Keyframes），你可以在动画序列中插入任意多个中间状态，精确安排“第一秒放大、后两秒变色并还原”这样的复杂流程。文章还特别用示意图直观地展示了这种区别。
简单说，如果只需要状态A平滑过渡到状态B，用Transition；如果要编排一段包含多个状态变化的完整“动画片”，就得请出Animation了。作者在最后也提到了，有过Flash动画经验的同学理解起来会特别快。
IT
2015-01-19 23:55:37
/
累计浏览 14,232
这篇讲的是HTML5如何通过 `data-*` 自定义属性，为元素规范地存储和传递私有数据。文章从 `data-*` 属性的定义切入，指出它与传统的任意自定义属性（如 `uid`）在使用上看似相似，但其核心价值在于将这类非可视数据标准化，让代码意图更清晰。
文章的重点在于对比两种存取这些数据的方法。第一种是通用的 `getAttribute` / `setAttribute` 方法，它兼容性极好，但需要写完整的属性名（如 `data-uname`），与传统方式无异。第二种则是HTML5提供的 `dataset` API，这是一种更现代、更语义化的方式。使用时，只需通过 `element.dataset` 对象即可访问，无需“data-”前缀。文章特别提醒了`dataset`的一个关键细节：如果属性名含有连字符（如 `data-date-of-birth`），在通过JS访问时会被自动转换为驼峰式命名（`dataset.dateOfBirth`）。
最终，文章清晰地给出了选择：如果追求广泛兼容或习惯传统操作，`getAttribute` 是可靠选择；若在支持HTML5的现代环境中开发，`dataset` API 提供了更优雅、更符合标准的数据交互方式。
IT
2015-01-17 00:16:40
/
累计浏览 3,087
在移动互联网时代，网页的 `
` 部分，特别是那些 `meta` 元素，对浏览器的渲染和搜索引擎优化（SEO）至关重要。这篇文章从基础的 `DOCTYPE` 声明出发，系统梳理了 `` 中各个关键标签的意义与使用场景。作者解释了不同 `DTD` 声明如何决定浏览器使用标准模式还是怪异模式进行渲染，并介绍了 HTML5 简洁的 `` 写法。
文章深入到具体的 `meta` 设置，对比了新旧字符编码声明方式的等效性，澄清了中文 `lang` 属性应使用 `zh-cmn-Hans` 而非 `zh-CN` 的规范细节。对于国内环境，它提供了确保浏览器（如 360）使用最新内核、禁止百度转码等实用技巧。在 SEO 部分，文章则明确了 `
`、`keywords`、`description` 等基础标签的正确配置方法。整篇文章以“一丝”的经典总结为基础扩展，旨在帮助开发者写出清晰、高效且兼容性好的 `<head>` 结构。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7274"
data-title="HTML head 头标签"
data-url="/it/article/7274"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-17 00:07:51</span>
<span class="br-dot">/</span>
<span>累计浏览 4,308</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7272">解决IOS点击链接触发的颜色块</a></h2>
<p class="br-summary">这篇讲的是移动端开发中一个常见的视觉“坑”：在iOS设备上，手指点击链接时系统默认触发的半透明灰色高亮块，有时会影响页面设计的整洁度。作者从实际项目出发，通过对比淘宝、京东等主流网站，发现它们巧妙地避免了这一现象。
问题的根源在于iOS Safari的一个默认行为，而非CSS样式问题。作者通过审查元素，最终定位到WebKit的私有CSS属性`-webkit-tap-highlight-color`。通过将该属性的Alpha通道（即RGBA颜色值的最后一个参数）设为0，就可以完全禁用这个点击高亮效果。
文章进一步解释了该属性的完整用法，包括它支持的系统版本、适用的元素范围，以及如何利用RGBa颜色值来定义高亮色或彻底隐藏它。最后，作者还贴心地分享了苹果官方的Safari CSS参考文档，为需要在iOS上进行深度Web开发的同学提供了进一步探索的路径。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7272"
data-title="解决IOS点击链接触发的颜色块"
data-url="/it/article/7272"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-14 13:38:23</span>
<span class="br-dot">/</span>
<span>累计浏览 1,249</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7265">函数式 CSS</a></h2>
<p class="br-summary">这篇讲的是如何将函数式编程的核心思想——比如不可变性和组合性——应用到传统上“全局且可变”的CSS开发中。作者从Wealthfront工程团队的实践出发，指出CSS的全局作用域、样式易被覆盖和与DOM结构紧耦合等问题，会带来意想不到的样式冲突和维护噩梦。
文章给出的核心方案是“函数式CSS”风格指南。其关键在于通过严格的命名约定为类名添加前缀，从而模拟出作用域，隔离样式；同时倡导使用组合（如同时应用多个类或Sass的@extend指令）来扩展样式，而不是重写已有的规则。这样既能避免副作用，又能提升样式的可复用性。
作者通过对比修改前后的代码实例，展示了如何减少样式依赖、增强组件独立性。最终目标是让样式表变得更具伸缩性、更少“意外”，即使在大型项目中也能保持可维护性。对于任何受困于CSS全局混乱的前端团队，这套实践提供了清晰的约束思路和改进路径。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7265"
data-title="函数式 CSS"
data-url="/it/article/7265"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-14 13:34:33</span>
<span class="br-dot">/</span>
<span>累计浏览 2,730</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7263">css3文字阴影属性text-shadow</a></h2>
<p class="br-summary">这篇技术文章聚焦于CSS3的text-shadow属性，系统讲解了其语法、参数及与box-shadow的异同。作者从回顾熟悉的box-shadow入手，详细拆解了text-shadow的每一个值：包括可选的颜色(color)、必需的水平与垂直偏移量(offset-x, offset-y)以及可选的模糊半径(blur-radius)，并特别说明了多个阴影叠加时的层级覆盖规则——与CSS类选择器不同，阴影列表遵循“先书写的在底层”的原则。
文章清晰对比了两者的关键差异：text-shadow没有inset内阴影选项，但在处理半透明文本时，不会像box-shadow那样裁剪阴影形状。作者指出，两者共同的特点是都不影响文档布局。在应用层面，文章展示了如何利用不同颜色与偏移的阴影组合，创造出凹凸立体文字效果，甚至模拟表单按钮的点击状态变化，并附上了可供体验的在线Demo与效果截图。
整体而言，文章通过具体参数解析与实用案例，帮助开发者掌握text-shadow的灵活用法，为页面文字增添视觉深度提供了明确的技术指引。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7263"
data-title="css3文字阴影属性text-shadow"
data-url="/it/article/7263"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-13 22:56:38</span>
<span class="br-dot">/</span>
<span>累计浏览 1,486</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7259">引入css外部样式表</a></h2>
<p class="br-summary">这篇讲的是一个看似基础却让不少前端开发者栽跟头的问题——CSS外部样式表的引入与缓存。作者从在微信端调试样式，修改后却无法实时看到更新的实际踩坑经历出发，深入探讨了路径选择、缓存控制等关键细节。
文章清晰地对比了相对路径与绝对路径在实际项目中的优劣，明确指出了项目上线时应优先使用绝对路径，以提升索引效率、有利于SEO和外链权重。更核心的部分聚焦于缓存问题，详细解释了浏览器（尤其是微信）缓存旧版CSS的机制，并通过分析淘宝和Facebook的实践案例，给出了具体的解决方案：为URL添加版本号参数（如 `?t=20150105`）或使用文件哈希值，可以有效强制浏览器更新资源。
作者最终总结出几条实用建议：少用相对路径、多用绝对路径、WebApp引入CSS时最好带版本号、并合理利用缓存机制（如304状态码）。对于前端初学者或曾为样式更新不生效而困惑的开发者而言，这些基于真实场景的总结和对比，提供了非常直接的参考和避坑指南。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7259"
data-title="引入css外部样式表"
data-url="/it/article/7259"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-12 22:55:35</span>
<span class="br-dot">/</span>
<span>累计浏览 2,012</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7258">css3中的几何图形shape研究</a></h2>
<p class="br-summary">这篇技术文章深入探讨了CSS3中一个颇为强大但可能被忽视的属性：`shape-outside`。作者开门见山地指出，传统CSS布局中，浮动元素周围的文字总是沿着矩形框排列，而`shape-outside`正是为了突破这一限制，允许文字沿着圆形、椭圆、多边形等自定义几何轮廓进行环绕排布。
文章清晰地梳理了该属性支持的四种基本形状函数：`inset()`（定义内凹区域）、`circle()`（定义圆形）、`ellipse()`（定义椭圆形）以及灵活性最高的`polygon()`（定义任意多边形）。通过具体的代码示例和效果对比图，详细解释了每个函数的参数含义，例如`circle()`中`closest-side`与`farthest-side`半径的区别，以及如何使用`polygon()`配合坐标点来创建复杂的五边形环绕效果。
不过，作者也坦率地指出了这个属性的现实局限：它目前只能应用于设置了`float`属性的元素，并且浏览器兼容性并不理想。因此，文章认为其最典型的应用场景是处理浮动图片（如头像）与周围文字的排版，能让图文混排效果更生动。
尽管实用性受限于兼容性，但文章最后强调，学习`shape-outside`有助于更深入地理解浮动模型和CSS布局逻辑。它展示了Web技术如何为设计师提供更精细的控制力，即便这项技术尚未全面普及，其背后的原理依然值得前端开发者了解。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7258"
data-title="css3中的几何图形shape研究"
data-url="/it/article/7258"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-12 22:54:34</span>
<span class="br-dot">/</span>
<span>累计浏览 2,510</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7257">关于webapp中的文字单位的一些捣腾</a></h2>
<p class="br-summary">这篇文章探讨的是移动WebApp开发中一个经典纠结：文字单位该用px、em、百分比还是rem？作者没有停留在理论争论，而是用实测对比给出了直观结论。
作者从PC与移动端对文字尺寸需求的差异出发，分别在未设置viewport和设置了`width=device-width`的情况下，对这几种单位进行了实测。关键发现是：当正确设置了viewport使布局宽度等于设备宽度后，不同单位计算出的最终显示大小趋于一致，px、em和rem在视觉效果上已无本质区别。
文章的核心价值在于澄清了一个常见误区，并提供了清晰的实践路径。它建议开发者可以优先遵循设计稿的px数值进行输出，后期根据实际设备再微调。同时，考虑到代码维护和未来兼容性，作者推荐使用px与rem作为首选单位，尤其强调了为html根元素设定基础字体大小的重要性。
因此，这篇文章为前端工程师在移动端文字排版上提供了一份基于实测的决策参考，帮助大家跳出单位选择的“内耗”，将精力集中在更统一、可控的工程实践上。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7257"
data-title="关于webapp中的文字单位的一些捣腾"
data-url="/it/article/7257"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-11 23:41:02</span>
<span class="br-dot">/</span>
<span>累计浏览 2,814</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7245">Github 的 CSS 风格指南</a></h2>
<p class="br-summary">这篇讲的是GitHub内部如何“写”CSS。它并非基础教程，而是一套从实战中淬炼出的系统性工程规范，直接解决了前端开发中代码混乱、维护困难的痛点。
文章清晰定义了从微观编码到宏观架构的每一层细节。微观上，它明确了如双空格缩进、属性冒号后加空格、优先使用`//`注释等具体规则，确保代码风格统一可读。更关键的是架构层面，它倡导使用SCSS，并给出了清晰的目录组织范例（components, globals, sections等），强调`$variable`与`@mixin`的集中管理。
在CSS特异性控制上，指南给出了极具操作性的原则：谨慎使用ID选择器，优先使用类名，倾向直接后代选择器（`>`）以降低复杂性。对于字体大小等单位选择、`js-`与`is-`类名的命名区分，也都有明确约定。整套体系的目标是提升代码的一致性、可维护性与团队协作效率，对于任何希望规范化CSS项目的团队都具有很高的参考价值。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7245"
data-title="Github 的 CSS 风格指南"
data-url="/it/article/7245"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-11 23:39:59</span>
<span class="br-dot">/</span>
<span>累计浏览 2,911</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7244">消除疑问：CSS动画 VS JavaScript</a></h2>
<p class="br-summary">这篇讲的是CSS动画和JavaScript动画之间的选择，并非像很多人想的那样简单。作者从自己作为动画爱好者的亲身体验出发，深入研究后发现，被广泛推崇的CSS动画其实存在一些缺陷。
文章首先指出了CSS的一个明显短板：它的`transform`属性将缩放、旋转和位移捆绑在一起，无法用不同的时间和缓动函数独立控制，这在复杂动画序列中是个实际问题。
更关键的是，作者拆解了“CSS动画性能更好”这一普遍认知。文章详细分析了“硬件加速”的两个层面：一是GPU层的创建，但这并非CSS专利，JavaScript通过`translate3d`等3D变换同样可以触发；二是将计算转移到不同线程，但这个过程本身有开销，且只对与文档流无关的属性有效，实际收益可能被高估。文中还通过压力测试对比显示，现代JavaScript动画库（如GSAP）的性能可以远超jQuery，并不逊色于基于CSS的方案。
最终，文章澄清了一个核心观点：CSS动画并非在所有情况下都是“更干净”或性能更优的选择。理解它们各自的局限和性能本质，才能根据项目需求——是简单的整体变换，还是需要复杂独立控制的序列——做出更合理的技术决策。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7244"
data-title="消除疑问：CSS动画 VS JavaScript"
data-url="/it/article/7244"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-11 23:24:03</span>
<span class="br-dot">/</span>
<span>累计浏览 2,729</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7240">css透明度的一些兼容测试</a></h2>
<p class="br-summary">这篇讲的是前端开发中一个常见的“坑”：如何让CSS透明度效果兼容到IE8及以下浏览器。作者从接手一个外包项目时遇到的真实问题说起——原本用`opacity`属性实现的半透明遮罩层，在旧版IE上直接变成了不透的黑色色块，完全破坏了页面设计。
文章深入分析了问题根源：标准`opacity`会作用于整个元素及其所有内容，而IE的私有滤镜`filter: Alpha(opacity=...)`行为有所不同，且两者混合使用时在IE9等版本中会产生冲突。作者详细展示了三种解决方案的演进：先用`filter`配合`rgba`背景色打底；再针对IE9的异常表现，用条件注释单独处理；最后尝试用媒体查询hack（如`@media screen\9`）来更精简地分版本控制样式。
过程中，作者也坦诚讨论了各种方案的局限，比如`filter`在IE6下可能失效，以及hack写法对维护性的潜在影响。文末的建议很实在：除非对设计还原度有极致要求，否则应谨慎使用这些浏览器特有的hack。整篇文章从实际故障出发，逐步拆解，对需要处理多端兼容的前端开发者有很具体的参考价值。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7240"
data-title="css透明度的一些兼容测试"
data-url="/it/article/7240"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-11 23:23:12</span>
<span class="br-dot">/</span>
<span>累计浏览 4,790</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7239">移动前端不得不了解的html5 head 头标签</a></h2>
<p class="br-summary">这篇讲的是移动端开发中容易被忽视但至关重要的HTML head头标签最佳实践。文章从移动端工作的重要性切入，系统梳理了从基础到进阶的各类头部声明。
它首先明确了`<!DOCTYPE html>`和`<meta charset="utf-8">`这些基础标签的写法。随后，重点解析了`lang`属性更标准的写法（如`zh-cmn-Hans`）及其意义。文章还针对国内复杂的浏览器环境，给出了具体的解决方案：比如使用`<meta name="renderer" content="webkit">`让360浏览器切换到极速内核，以及添加`<meta name="applicable-device" content="pc,mobile">`来禁止百度转码。
这些内容并非纸上谈兵，而是来自一线开发者的经验总结（如一丝和百度FEX的整理），直指实际项目中会遇到的兼容性和体验问题。对于移动前端开发者来说，这相当于一份即拿即用的头部标签配置清单，能帮助规避很多隐蔽的坑。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7239"
data-title="移动前端不得不了解的html5 head 头标签"
data-url="/it/article/7239"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
</article>
<article class="br-card br-plain-card">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-04 23:15:00</span>
<span class="br-dot">/</span>
<span>累计浏览 27,052</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7212">css3：box-shadow边框阴影属性值详解</a></h2>
<p class="br-summary">这篇讲的是CSS3中`box-shadow`属性的完整用法。作者从自己U盘损坏、资料丢失的经历说起，引出了重新整理这篇属性详解文章的缘由。
文章核心围绕`box-shadow`展开，将其定义为“CSS模型边框阴影”，并详细拆解了其W3C规范中的每个参数值。从可选的`inset`（内阴影）开始，到必须设置的水平（`offset-x`）与垂直（`offset-y`）偏移量——作者用数轴坐标系进行了形象比喻。接着解释了`blur-radius`（模糊半径，值越大阴影越模糊）和`spread-radius`（扩展半径，正值扩大阴影，负值缩小）这两个控制阴影形态的关键值。
值得注意的是，文章不仅列出了属性语法，还提供了可交互的代码示例，直观展示不同参数组合产生的视觉效果。作者在序言中强调的“实践是检验真理的唯一标准”的学习态度，也贯穿了这篇注重实操的教程中。</p>
<div class="br-actions" style="margin-top:8px;">
<button type="button"
class="br-button"
data-reader-favorite
data-type="it"
data-id="7212"
data-title="css3：box-shadow边框阴影属性值详解"
data-url="/it/article/7212"
data-mode="local"
aria-pressed="false">
<span data-favorite-label>☆ 稍后读</span>
</button>
</div>
<div class="br-thumb br-compact-thumb is-cached">
<img src="/upload/thumb/2026/05/11f5dc69a2361fdde0b4dae1d0d30ae9fabd1e6a.gif" alt="" loading="lazy">
</div>
</article>
<nav class="br-pagination" aria-label="pagination">
<ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" href="/it/category/12/1">1</a></li><li class="page-item"><a class="page-link" href="/it/category/12/2">2</a></li><li class="page-item"><a class="page-link" href="/it/category/12/3">3</a></li><li class="page-item"><a class="page-link" href="/it/category/12/4">4</a></li><li class="page-item active" aria-current="page"><span class="page-link">5</span></li><li class="page-item"><a class="page-link" href="/it/category/12/6">6</a></li><li class="page-item"><a class="page-link" href="/it/category/12/7">7</a></li><li class="page-item"><a class="page-link" href="/it/category/12/8">8</a></li><li class="page-item"><a class="page-link" href="/it/category/12/9">9</a></li><li class="page-item"><a class="page-link" href="/it/category/12/10">10</a></li><li class="page-item"><a class="page-link" href="/it/category/12/18">>|</a></li></ul>
</nav>
</section>
<aside class="br-stack br-sidebar" aria-label="IT sidebar">
<section class="br-side-card">
<h2>近 3 天十大热文</h2>
<ol class="br-rank-list">
<li><span class="br-rank">1</span><a href="https://blogread.cn/it/article/4237?f=hot3">浏览器的工作原理：新式网络浏览器幕后揭秘<small>近 3 天 87 浏览</small></a></li>
<li><span class="br-rank">2</span><a href="https://blogread.cn/it/article/6189?f=hot3">彻底屏蔽优酷广告<small>近 3 天 65 浏览</small></a></li>
<li><span class="br-rank">3</span><a href="https://blogread.cn/it/article/6194?f=hot3">linux下搜索find命令详解<small>近 3 天 60 浏览</small></a></li>
<li><span class="br-rank">4</span><a href="https://blogread.cn/it/article/8379?f=hot3">Postmortem: 关于 xzutil <small>近 3 天 58 浏览</small></a></li>
<li><span class="br-rank">5</span><a href="https://blogread.cn/it/article/5917?f=hot3">ZooKeeper管理员指南——部署与管理Z<small>近 3 天 57 浏览</small></a></li>
<li><span class="br-rank">6</span><a href="https://blogread.cn/it/article/7905?f=hot3">浅谈 WHR 全历史排名<small>近 3 天 56 浏览</small></a></li>
<li><span class="br-rank">7</span><a href="https://blogread.cn/it/article/4223?f=hot3">Google Megastore系统事务机制<small>近 3 天 54 浏览</small></a></li>
<li><span class="br-rank">8</span><a href="https://blogread.cn/it/article/4343?f=hot3">高性能EL――Fel探秘，兼谈EL<small>近 3 天 53 浏览</small></a></li>
<li><span class="br-rank">9</span><a href="https://blogread.cn/it/article/8382?f=hot3">让 AI 把我的 PHP 博客重写成 Go<small>近 3 天 43 浏览</small></a></li>
<li><span class="br-rank">10</span><a href="https://blogread.cn/it/article/1093?f=hot3">为什么GPL是更好的开源许可证?<small>近 3 天 39 浏览</small></a></li>
</ol>
</section>
<section class="br-side-card" style="padding:12px;text-align:center;">
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:250px"
data-ad-client="ca-pub-2206192680127944"
data-ad-slot="5430998082"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
</aside>
</main>
<footer class="br-shell" style="padding-top:12px;padding-bottom:20px;color:var(--br-muted);font-size:13px;">
<div style="text-align:center;line-height:1.9;">
© 2009 - 2026 by blogread.cn
·
微博：<a href="https://weibo.com/blogread" target="_blank" style="color:var(--br-accent)">@IT技术博客大学习</a>
·
<span class="news-footer-trust-links"><a href="/about.html">关于</a> · <a href="/contact.html">联系</a> · <a href="/privacy.html">隐私</a> · <a href="/disclaimer.html">内容来源声明</a></span>
·
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备15002552号-1</a>
</div>
</footer>
<!-- Bootstrap 5 bundle (含 Popper); 不再依赖 jQuery。 -->
<script src="/plugins/bootstrap-5.3.8/js/bootstrap.bundle.min.js"></script>
<script src="/assets/frontend-modern/reader-actions.js"></script>
</body>
</html>
