在写过一点时间 CSS 之后，大家对于常见的属性应该都很熟了，例如最基本的 display、position、padding、margin、border、background 等等，在写 CSS 的时候不需要特别查什么东西，很顺的就可以写出来。

这些属性之所以常见，是因为许多地方都用得到，而有些 CSS 属性只能使用在某些特定的地方，或者只有在某个特定的情境之下才会出现。我经常会忘记这些没不常的属性，但有时候这些属性其实特别重要。

所以本文介绍一些我觉得不太好记但是却很好用的 CSS 属性，也是顺便帮自己做个笔记。

input 的外框与 “|” 的颜色

比起 border， outline 是一个相对少见的属性，但是要特别提到的是在 input 上的应用。在浏览器的默认行为中，当你把焦点移动到 input 时，边缘会出现一圈蓝色：

那个蓝色的就是 outline，可以通过 Chrome devtool 验证：

点击时的蓝色框框

我记得在手机上点击一些东西的时候会出现一个蓝色的外框还什么之类的，但我刚刚怎么试都没有试出来，总之对应的属性叫做 -webkit-tap-highlight-color，用这关键字查应该可以查到一些其他文章跟范例。

平滑滚动

有许多网站都有一个功能，最常见的是博客网站，在右侧可能会出现文章每一个段落的标题，点下去之后就可以快速定位到那个段落去。

如果没有任何设定的话，就是点下去直接跳到那定位的段落。但有一种东西叫做平滑滚动（smooth scroll），会添加一些过场，让使用者知道是滚动到那边去的。

很久以前要实现这个功能可能需要用到 JS，但现在可以用 CSS 的 scroll-behavior: smooth; 来搞定（下面的例子取自 MDN）：