前言写过一段时间的CSS，应该熟悉常用的属性，比如最基本的display、position、padding、margin、border、background、etc.等等，写CSS的时候什么都不用查，可以很顺利的写出来。这些属性之所以通用，是因为它们用在很多地方，而有些CSS属性只能在特定的地方使用，或者只在特定的情况下出现。我经常忘记这些共同的属性，但有时这些属性实际上非常重要。所以这篇文章介绍一些我觉得不好记但是好用的CSS属性，顺便也给自己做个笔记。输入的轮廓和“|”的颜色相对于border来说比较少见，outline是比较少见的属性，但是特别提到在input上的应用。在浏览器的默认行为中，当你将焦点移动到输入框时，边缘会出现一个蓝色圆圈：蓝色是轮廓，可以通过Chromedevtool验证：所以如果你不想要轮廓或者想改变颜色，那么修改这个属性即可。闪烁|在输入框中称为插入符。如果想改变颜色，可以通过caret-color属性修改：点击时的蓝色框。我记得当你在手机上点击某个东西时，会出现一个蓝色的。有外框之类的东西，不过我刚才没试过。简而言之，对应的属性叫做-webkit-tap-highlight-color。您应该能够找到一些其他带有此关键字的文章和示例。平滑滚动在很多网站都有功能，最常见的是博客网站，文章的每一段的标题可能会出现在右侧，点击后可以快速定位到该段。如果没有设置，直接向下点击，直接跳转到所在段落。但是有个东西叫smoothscroll，会加一些过场动画让用户知道滚动到哪里。很久以前，你可能需要使用JS来实现这个功能，但现在你可以使用CSSscroll-behavior:smooth;搞定（下面的例子摘自MDN）：加载新内容时的滚动位置。底部自动加载更多功能。当加载更多的时候，你会期望用户停留在同一个位置，不会因为加载更多而自动向下滚动滚动条。但是有时候浏览器默认的处理方式并不是想象中的那样。有可能当你加载更多元素时，屏幕并没有停留在你想象的位置。这时，你可以使用overflow-anchorCSS属性来调整这种行为。一次只滑动一个元素有时我们需要这样的效果：用户直接滑动到下一个元素，而不是滑动到任何地方，这可以通过scroll-snap相关属性来实现。像这样：手机点击延迟300ms应该很多人都知道。手机端的点击事件会有300ms左右的表现，也就是说你点击之后需要300ms才能触发点击事件。这个延迟的原因是你在手机上双击可以放大，所以第一次点击浏览器不知道你是点击两次还是只点击一次，所以需要等待一个尽管。这个延迟之前好像已经去掉了，但是如果你发现它仍然存在，可以通过touch-action:manipulationCSS属性来解决，这个属性可以设置为禁用一些手势。可以在MDN上找到更多详细信息。font-smooth在CreateReactApp的默认css中(https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.css#L6)见这个属性：body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}这两个属性在很多网站上也能找到，都是和字体渲染相关的，比如antialiased其实，就是大家都听说过的抗锯齿。您可以自行决定如何渲染字体。结束语本文简单记录了一些我觉得比较难记但又好用的CSS属性。因为它们的使用频率不是很高，所以在真正需要的时候很容易忘记属性名。如果关键字在搜索中丢失，则很难找到该属性的名称。
