“更具视觉吸引力的 焦点”

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

有一个 JavaScript 库,Focusingly,它表示

使用 Focusingly,焦点样式会适应并适合各个元素。

无需配置,Focusingly 会自动完成。 结果是一种令人愉悦的定制效果,可以巧妙地吸引眼球。

想法是,如果链接颜色(或任何可聚焦元素)是红色,则轮廓也将是红色,而不是那种可能在美学上不受欢迎的模糊浅蓝色。

为什么使用 JavaScript? 我不太确定。 Matt Smith 制作了一个演示,该演示表明 outline 颜色从 color 继承,这会产生相同的结果。

a:focus {
  outline: 1px solid;
  outline-offset: .15em;
}

直接链接 →