[注解] [208] 连续的图像边框 about css-secrets HOT 5 OPEN

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

from css-secrets.

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

from css-secrets.

张哥,你好。我在看这"连续的图像边框"这节的时候发现一个问题。作者使用简明的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;
想偷点懒都不行:-( 

from css-secrets.

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

from css-secrets.

from css-secrets.