版权声明：本文为博主原创文章，未经同意，不得转载。 https://blog.csdn.net/u013778905/article/details/86507815
三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。
字体排印
- 连字符断行，hyphens: [none|manual|auto]，设置为auto的时候，可以实现自动软连字符，前提是在html标签设置好lang属性。
- 有时候我们希望保留源代码中的空白符和换行，比如代码块，我们可以用到
white-space: pre还有其他属性，pre、pre-line或pre-wrap，但是推荐pre,它的兼容性更好。 - 插入换行，用伪元素添加换行符，
dd::after{content: "\A";} - 文本行的斑马条纹，如果是有结构划分的内容可以通过
nth-child() / :nth-of-type()等伪类来实现斑马条纹，但是如果是一个代码块或者纯文字的时候，我们要想实现斑马条纹可以考虑用背景实现，之前我们已经分享过如何利用渐变实现条纹背景，运用到这里就刚好，同时注意设置背景的位置。
示例：https://codepen.io/xiangshuo1992/pen/MZPvpq
<p>
timeout = setTimeout(function () {
if (Date.now() - t < 2000) {
location.href = apkUrl
}
}, 1000);
</p>
p{
width: 300px;
white-space: pre;
padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(
rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
- 说到代码展示我们还会想到Tab缩进宽度问题，一般编辑器都会设置缩进宽度为4个字符或2个字符，但是浏览器中一般会将其显示为8个字符，这样缩进幅度有点大而且占用了很多空间，好在CSS3给我们提供了
tab-size属性，让我们可以控制这个情况，如：pre{tab-size:2;}。 - 文字阴影，
text-shadow，和box-shadow类似，当不设置模糊半径的时候，就会生成一层和原文字一样的文字，当添加模糊半径时就会实现外发光的效果，该属性支持transition过渡，可以设置在鼠标hover时，触发过渡效果，如果从兼容考虑，模糊外发光效果也可以由filter:blur()属性设置来实现。如果将多个不模糊的文字阴影叠加，并设置偏移，可以实现3D的文字凸起效果。 - SVG的
textPath路径文本，可以实现文字沿着设定的路径排列，比如圆形，波浪形等。
用户体验
- 选用合适的鼠标光标，最值得推荐的就是禁用状态的提示，可以给禁用的累或者伪类或者属性选择器添加属性
cursor: not-allowed;。 - 扩大可点击区域，没有人愿意对一个狭小的按钮尝试点按很多次，但是现实中我们却经常遇到这种情况，在PC应用上会相对好一点，因为我们的鼠标操作还是相对精准和快速的，但是我们在手机应用上时，经常会对一个元素进行多次的操作来达到触发，原因就是因为元素的点击区域不够大，而我们的手指又不如鼠标那样精确，所以我们优化这项工作是很有必要的。
- 那么如何来扩大点击区域呢，有几种方案，比如给元素添加透明色的
border或者padding，但是这通常会造成元素本来的布局变化，如果是不受影响，用这种办法是可以直接一个属性设置就达到目的，但是很多情况下是会影响的，所以还有另外一个方案，就是在按钮的上方覆盖一层透明的伪元素，并让伪元素在四个方向上都比宿主元素大出10px，利用定位，我们可以将伪元素设置为任何的尺寸、位置或形状。 - 在移动端，点击区域是有推荐大小的，根据 iOS 人机交互规范，推荐的最小点击面为
44pt*44pt，在 Google Material Design 也就是安卓上，推荐最小点击面为48dp*48dp，在移动web应用中，根据设备的DPR，我们可以简单的估算为DPR*最小点击面，规范只是理想状态的推荐，不一定要严格执行，只要不影响正常布局和功能，同时又注意扩大点击区域来优化用户体验，目的就达到了。 - 表单美化，这是一个非常有意思的工作，目前浏览器给到CSS工作者改造表单的属性不多，所以要实现个性化的比如单复选框，我们经常会通过其他元素来模拟，这里我不展示具体怎么实现，一句代码示例传达思路
input[type="checkbox"] + label::before，然后可以看下表单美化这个课程，基本都在里面了，也可以去搜搜纯css实现tab切换效果，或者纯css实现轮播图。 - 滚动提示，我们通过容器的阴影提示我们上下是否还有内容未展示，于是我们想到利用背景来实现这种效果，其中一个最重要的新属性是
background-attachment: local;可以看下示例的完整效果以及代码实现，https://codepen.io/xiangshuo1992/pen/dwrwKg 。
- 我们都知道
textarea可以设置用户调节大小，其实这个属性也是可以用到其他元素上的，resize: horizontal | vertical | none | both，如果我们想要用户自己调节其他元素大小，用这个属性也是可以的。
END.