Comments (5)
张老师,您好。我是一名大三的学生。我最近阅读《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.
Related Issues (20)
- [注解] [508] 现实中的文字效果
- [注解] [509] 环形文字
- [注解] [603] 自定义复选框
- 提交勘误 HOT 3
- [注解] [607] 交互式的图片对比控件
- 线性渐变 HOT 2
- 第59页勘误 HOT 2
- [注解] [705] 垂直居中
- [注解] [706] 紧贴底部的页脚
- [注解] [801] 缓动效果
- [注解] [802] 逐帧动画
- [注解] [806] 沿环形路径平移的动画 HOT 6
- [注解·加强版] 如何正确编写 Fallback 样式
- 复杂的背景图案实践中的疑问 HOT 5
- fill="%23fb3”,%23fb3怎么理解?fb3是颜色,23是什么? HOT 3
- p161:第 34 滚动提示,关于 `background-attachment` 代码问题 HOT 5
- [注解] [306] 简单的饼图
- 提交勘误 HOT 2
- p49页的蚂蚁行军边框问题 HOT 2
- 网站挂了,会修一下吗 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-secrets.