CSS-Secrets
CSS-Secrets copied to clipboard
cssmagic
《CSS 揭秘》这本书的大本营
## 花絮与注解 #### 第 26 页 · 第四段 > 事实上，指定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常…… 此时描边和投影在理论上所占的范围应该是完全一样的，这里所说的 “渲染异常” 指的是投影可能会溢出描边的范围。 出现这种渲染异常的底层原因在于，描边与投影的绘制原理不同：描边是完全规则的矩形，完全对齐像素；而具有扩张效果的投影需要由元素的原始形状扩散而成。 对浏览器来说，前者更像是一种基于光栅的绘图算法，而后者更像是一种矢量算法。因此，在对待非整数像素值时，两者的行为可能存在差别——前者在渲染前会对像素长度值取整，而后者可能会接受非整数的长度值（在计算出矢量路径之后光栅化），从而引发两者之间的渲染误差。 如果浏览器的显示比例处于缩放的情况下，或者显示器是视网膜屏幕（由多个物理像素显示一个逻辑像素的高精度显示设备），又或者元素处于 CSS 动画之中，通常比较容易出现这种渲染误差。 ## 交流与答疑 （暂无）
## 花絮与注解 #### 第 221 页 ‧ 本节 这一节算是全书最烧脑的一个案例了，不过我们用一句话就可以概括它：这基本上是一个 “自转抵消公转” 的故事。 当自转周期与公转周期完全相等时，这个物体在外界看来就没有任何角度变化了，从而以一种 “平移” 的方式在围绕圆心转动。
勘误表
> #### 如何提交勘误？ > > 如果你在阅读本书的过程中发现任何错误（包括编辑、排版、翻译、技术等方面的错误），[请新开一个 issue](https://github.com/cssmagic/CSS-Secrets/issues/new) 来描述这个错误，并请在标题中注明 “提交勘误”。当编辑或译者确认为错误后，将会收录到本页面中。 > > 感谢你的严谨让这本书变得圆满，其他读者必将从中受益！ ## 中文版勘误 > #### 图标含义 > > * ✅ - 已在后续印次中修正。 > * ⚠️ - 尝试在后续印次中修正，但仍有错误。...
FAQ / 常见问题
## 这本书的中文版是什么情况？ #### 详细介绍 * [千呼万唤始出来：《CSS Secrets》简体中文版前瞻报导](http://www.cssmagic.net/blog/wx/15) #### 出版社 由国内顶尖的计算机图书公司 “图灵文化” 正式引进。 #### 译者 本书的中文版已由 “魔法哥” 翻译完成。 联系方式： * GitHub： [@cssmagic](https://github.com/cssmagic) * 微博： [@CSS魔法](http://weibo.com/cssmagic) * 知乎： [@CSS魔法](http://www.zhihu.com/people/cssmagic) * 微信公众号：...
## 交流与答疑 微信用户 **天下第二** 提问： > 我发现单个标签画饼图有一个问题，就是 100% 的状态没法显示。 > > [这篇博客](https://www.cnblogs.com/joyjoe/p/6922917.html) 用了书上的代码，如果把最下面那个图改成 `animation-delay:-100s`，本来希望是整个饼图显示 `#655` 颜色，但是实际上恢复了初始状态的绿色。 临时回复如下： 我暂时没有去深入分析原因。在不改变动画代码的前提下，最简单的变通解决办法是把 `-100s` 写成 `-99.999s`。 如果你是用脚本来写入元素的 `.style.animationDelay` 的话，在写入之前减去 `0.001` 即可；或者判断一下，当发现写入值为 `100` 时，改为 `99.999` 再写入。
总目录
## 《CSS 揭秘》总目录 章节编号 | 章节标题 | 试读样章 [1] | 官方电子版 [2] | 注解 [3] :---:|---|:---:|:---:|:---: 000| 译者序|[试读](https://github.com/cssmagic/CSS-Secrets/issues/23)| [免费阅读 ↗](http://www.ituring.com.cn/book/tupubarticle/9387)|- | | 003| 本书收到的赞誉|[试读](https://github.com/cssmagic/CSS-Secrets/issues/21)| [免费阅读 ↗](http://www.ituring.com.cn/book/tupubarticle/9386)|- | | 030| **原书推荐序**|[试读](https://github.com/cssmagic/CSS-Secrets/issues/9)|...
伪元素方案中对伪元素设置z-index:-1后，会使得伪元素的层叠层次不仅被推到宿主元素之后，甚至可能推到宿主元素的父级元素的背景之后，导致无效。 [demo](http://codepen.io/hardfist/pen/MeKadB) 解决方法：为.button添加z-index:0。
你好，我在实践复杂的背景图案时出现一个疑问： 按作者的案例代码写棋盘背景，小方格不能均分容器宽高。代码如下： ```css width: 300px; height: 300px; background: #58a; background-image: linear-gradient(90deg, white 1px, transparent 0), linear-gradient(white 1px, transparent 0); background-size: 30px; ``` 显示效果：  如果我把`background-size`,`width`,`height`的值调整为`40px`,`400px`，则不会有显示异常。 显示效果：  我不清楚我的代码哪里出问题了，恳请解答一下。
在浏览器特性参差不齐的大环境下，“渐进增强” 与 “平稳退化” 是一种务实的策略。因此，在编写华丽样式的同时，我们还需要想好退路，为功能较弱的浏览器提供 fallback（回退样式）。 总的来说，我们应该利用 CSS 自身的机制来组织回退样式，而不是依赖 CSS hack 来实现。  举个例子，设计师要求某个元素的背景色显示为半透明的黑色（如上图所示）。但我们都知道，低版本 IE 等浏览器并不支持 RGBA 颜色，因此对于这些浏览器，我们需要将它的背景色设置为最接近设计意图的纯黑色。那么在这里，半透明黑色是我们期望的 “理想样式”，而纯黑色则是用来兜底的 “回退样式”。 在搞清楚状况之后，我们很快写出了下面的代码： ```stylus background: rgba(0,0,0,0.75); background: #000\9; ``` 这段代码的意图是这样的：第一条声明是我们理想的样式，写给标准浏览器；第二条声明是专门写给 IE 的 CSS...
购买方式
## 纸质书 * 原价： 99.00 元（实际零售价约为八折左右） * 购买渠道： * [京东](https://item.jd.com/13305034.html)（推荐） * [当当](http://product.dangdang.com/23953090.html) * [亚马逊](https://www.amazon.cn/dp/B01ET3FO86) * [China-Pub](http://product.china-pub.com/4942111) ## 电子版 * 定价： 49.99 元 * 购买渠道：[图灵官网](http://www.ituring.com.cn/book/1695) 独家发售。（关于电子版的疑问请参见 [FAQ 中的相关段落](https://github.com/cssmagic/CSS-Secrets/issues/16#e-book-more)） ##...