CSS魔法
#### 网友 @KeithChou 提问： > 张老师，您好。我是一名大三的学生。我最近在阅读《CSS 揭秘》第二章的时候发现了一个问题。 > > 如果使用 box-shadow 和 outline 来写一个边框内圆角的话，因为这两个属性都不算在 CSS 盒模型内的，如果给该元素添加 click 或者 hover，那就无法扩大点击范围和响应区域了，这样用户体验就会不太好。 > > 请问张老师，这个问题应该如何解决？期待您的回复…… 你挺细心的，书中的写法确实存在这个问题。 解决思路应该是这样的：我们只要把投影和描边 “缩” 回到元素自身的范围内，那 “边框” 部分就可以响应鼠标的交互了。幸运的是，投影和描边确实都可以做到这一点： - 投影可以是...
> 另外我在平行四边形中skew() 也遇到类似的问题 暂时没有时间细想，你可以尝试用其它方法来实现平行四边形，比如 `clip-path` 或 CSS Shapes。
这种特殊形状用常规的 CSS 方法肯定做不到了。用多个元素来拼，一来不划算，二来很难拼得准。没细看 CSS Shapes 加上 drop-shadow 滤镜能不能做到，你可以尝试一下。如果要考虑兼容性，建议用图片（位图或 SVG）。
@tianzhich 可以试试万能的伪元素 😉
@cyanxxx 即使不用 JS，用纯 CSS 来实现应该也是可行的。不如把这个问题留给你自己思考吧？ 😉
@cyanxxx 用动画的 delay 能控制起始旋转角度吗？我没试过，只是抛一个想法出来哈。 另外，思路不用局限于 CSS。结合 JS 来控制动画可能会简单一些。
> @MwumLi > 最后为什么代码里不用给变换元素设置 `transform-origin: 0 0;` 示例代码只是为了说明 `translate()` 模拟 `transform-origin` 的原理。 在最终的代码里，动画的原点就是路径的正中心，也就是 `transform-origin` 的初始值，因此不需要显式写出来。
@hdming :heart: 谢谢反馈！已收录到 [“勘误表 - 排版失误”](https://github.com/cssmagic/CSS-Secrets/issues/36) 中。 另建议新开 issue 来提交勘误。
@ourfeel 这里的 “单位” 应该是 `%`，但简体中文版确实把数字搞错了。已更新到主帖，谢谢反馈。 👍 另建议新开 issue 来提交勘误。
请关注项目首页的 [进度表](https://github.com/cssmagic/CSS-Secrets)。目前的进度确实是慢于预期的，主要是因为全彩图文排版比较花时间。 据悉，目前排版已完成，并已进入三审阶段。 ~~三审完成即可付印。~~ 三审之后还有三校，三校完成即可付印。