[注解] [208] 连续的图像边框
cssmagic opened this issue · 5 comments
花絮与注解
第 48 页 · 第一段
原因是
background-origin的默认值是padding-box，因此，图片的显示尺寸不仅取决于 padding box 的尺寸，而且被放置在了 padding box 的原点（左上角）。
此时背景图片的显示尺寸取决于 padding box 的尺寸，原因在于元素设置了 background-size: cover 样式。这个属性的行为是在保持图片的宽高比不变的前提下，先把图片缩小至无穷小，再尝试逐渐拉伸图片，当图片刚刚好可以覆盖住元素时定形。
说到 “覆盖住元素”，还是那句话，实际上需要覆盖住的是元素的 “背景定位区域”。而元素的背景定位区域是由 background-origin 属性来决定的，默认是 padding-box。
交流与答疑
（暂无）
张老师，您好。我是一名大三的学生。我最近阅读《CSS揭秘》第二张的时候发现了一个问题。
如果使用box-shadow和outline来写一个边框内圆角的话，因为这两个属性都不算在CSS盒模型内的，如果给该元素添加click或者hover，那就无法扩大点击范围和点击区域了，这样用户体验就会不太好。
请问张老师，这个问题应该如何解决？
期待您的回复...
@KeithChou
你好，谢谢参与讨论。我会在 “边框内圆角” 这一节的注解 中回答你的问题。
张哥,你好。我在看这"连续的图像边框"这节的时候发现一个问题。作者使用简明的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;
想偷点懒都不行:-(