[注解] [204] 边框内圆角

[cssmagic]

花絮与注解

第 26 页 · 第四段

事实上，指定一个等于描边宽度的扩张值在某些浏览器中可能会得到渲染异常……

此时描边和投影在理论上所占的范围应该是完全一样的，这里所说的 “渲染异常” 指的是投影可能会溢出描边的范围。

出现这种渲染异常的底层原因在于，描边与投影的绘制原理不同：描边是完全规则的矩形，完全对齐像素；而具有扩张效果的投影需要由元素的原始形状扩散而成。

对浏览器来说，前者更像是一种基于光栅的绘图算法，而后者更像是一种矢量算法。因此，在对待非整数像素值时，两者的行为可能存在差别——前者在渲染前会对像素长度值取整，而后者可能会接受非整数的长度值（在计算出矢量路径之后光栅化），从而引发两者之间的渲染误差。

如果浏览器的显示比例处于缩放的情况下，或者显示器是视网膜屏幕（由多个物理像素显示一个逻辑像素的高精度显示设备），又或者元素处于 CSS 动画之中，通常比较容易出现这种渲染误差。

交流与答疑

（暂无）

[cssmagic]

网友 @KeithChou 提问：

张老师，您好。我是一名大三的学生。我最近在阅读《CSS 揭秘》第二章的时候发现了一个问题。

如果使用 box-shadow 和 outline 来写一个边框内圆角的话，因为这两个属性都不算在 CSS 盒模型内的，如果给该元素添加 click 或者 hover，那就无法扩大点击范围和响应区域了，这样用户体验就会不太好。

请问张老师，这个问题应该如何解决？期待您的回复……

你挺细心的，书中的写法确实存在这个问题。

解决思路应该是这样的：我们只要把投影和描边 “缩” 回到元素自身的范围内，那 “边框” 部分就可以响应鼠标的交互了。幸运的是，投影和描边确实都可以做到这一点：

• 投影可以是 “内嵌投影”（inset），它出现在元素的 padding box 以内。
• 描边有一个 outline-offset 属性，可以控制描边的偏移量，它甚至可以是负值。当这个属性的值为负时，描边就会向元素内部收缩。具体可以参见第 22 页 “多重边框” 这一节。

为了证明这个思路是可行的，我特意写了一个 在线 demo。如果你有兴趣，也不妨写一个试试看！

[KeithChou]

把box-shadow 和 outline-offset 设置相同的值然后在缩到容器当中确实扩大了点击热点，不过边角外直角还是点击不到..不过这问题不大了。感谢老师的回复。学到知识了。另外我在平行四边形中skew() 也遇到类似的问题，希望老师能抽空解决。感谢老师...

[cssmagic]

另外我在平行四边形中skew() 也遇到类似的问题

暂时没有时间细想，你可以尝试用其它方法来实现平行四边形，比如 clip-path 或 CSS Shapes。

[YingshanDeng]

@cssmagic 遇到一个CSS 问题，请问一下，如下图处的圆角如何处理好呢？暂时没有想法，感谢。

[cssmagic]

这种特殊形状用常规的 CSS 方法肯定做不到了。用多个元素来拼，一来不划算，二来很难拼得准。没细看 CSS Shapes 加上 drop-shadow 滤镜能不能做到，你可以尝试一下。如果要考虑兼容性，建议用图片（位图或 SVG）。

[MJingv]

魔法哥你好 border-radius 50% 为什么是椭圆呢。 能不能详细解释一下呢
这个百分比是比原来的宽高，r超过一半上下就合并了，所以会是圆形or椭圆。
看这本书之前要好好看基础啊

[sunchenggit]

@MJingv 元素的宽高要是一致的时候在应用 border-radius 50% 的时候才是圆形，宽高不一致的时候就是椭圆

[tianzhich]

现在 outline 也围绕 corner 来了，不再是规则的矩形，那么问题来了，还有没有一种元素的 hack 方法呢？看来是只能两个元素实现了 😕

[cssmagic]

@tianzhich
可以试试万能的伪元素 😉

[tianzhich]

@tianzhich 可以试试万能的伪元素 😉

哈哈你刚说完，平行四边形那边也提到了