[注解] [208] 连续的图像边框

[cssmagic]

花絮与注解

第 48 页 · 第一段

原因是 background-origin 的默认值是 padding-box，因此，图片的显示尺寸不仅取决于 padding box 的尺寸，而且被放置在了 padding box 的原点（左上角）。

此时背景图片的显示尺寸取决于 padding box 的尺寸，原因在于元素设置了 background-size: cover 样式。这个属性的行为是在保持图片的宽高比不变的前提下，先把图片缩小至无穷小，再尝试逐渐拉伸图片，当图片刚刚好可以覆盖住元素时定形。

说到 “覆盖住元素”，还是那句话，实际上需要覆盖住的是元素的 “背景定位区域”。而元素的背景定位区域是由 background-origin 属性来决定的，默认是 padding-box。

交流与答疑

（暂无）

[KeithChou]

张老师，您好。我是一名大三的学生。我最近阅读《CSS揭秘》第二张的时候发现了一个问题。
如果使用box-shadow和outline来写一个边框内圆角的话，因为这两个属性都不算在CSS盒模型内的，如果给该元素添加click或者hover，那就无法扩大点击范围和点击区域了，这样用户体验就会不太好。
请问张老师，这个问题应该如何解决？
期待您的回复...

[cssmagic]

@KeithChou
你好，谢谢参与讨论。我会在 “边框内圆角” 这一节的注解 中回答你的问题。

[galliliu]

张哥,你好。我在看这"连续的图像边框"这节的时候发现一个问题。作者使用简明的background属性跟不使用的实现效果有细微的差别。两种代码写法如下：

两种代码的效果如下图：

上面的是不使用background的简明属性的效果，下面则是使用background简明属性的效果。为什么会这样子呢？于是我打开google开发者工具，发现浏览器对这两种写法解析出来的值是不一样的。区别在于背景定位background-position-y属性不同，不使用简明属性的写法解析得到的background-position-y为0%，另一个则是50%，也就是说第二种的代码会使背景图片有一个向下的偏移。w3c规范里面也说道：“如果过背景的定位属性只规定一个，那么另一个就为50%。”，因此在简明属性中把图片背景的定位属性修改为0 0才一致，如下：
background：linear-gradient(white,white) padding-box,
url(stone-art.jpg) border-box 0 0 / cover;
想偷点懒都不行:-( 

[cssmagic]

@galliliu
谢谢反馈，这相当于原书的一个错误，我稍后会更新到 勘误表 中。

[galliliu]

不客气 2017-08-06 18:46 GMT+08:00 CSS魔法 <[email protected]>:

…

@galliliu <https://github.com/galliliu> 谢谢反馈，这相当于原书的一个错误，我稍后会更新到 勘误表 <#2> 中。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFm9xAQKhU6Ku9gT1P9LRoiut5hT941pks5sVZmagaJpZM4IQCXS> .