博客笔记 7

渐变色背景的边框颜色问题

当设置背景色为渐变色之后，该颜色是不能应用到边框颜色之上的，所以即使设置边框为 border-color: transparent 也无法使得边框完美融入背景，我在 webview 中看到的效果是左右两端的纯色边框。

需要在设置 background-color 时指明应用于 border-box 之上，就像这个博客中的写法:

.btn-gradient-2 {
  background: 
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

CSS 字体及可变字体

• MDN: Variable fonts guide
• 可变字体( Variable Fonts )尝鲜

特定字体用 font-face 来设置，然后在 CSS 里面应用逻辑是比较清晰的，但是常规的方法和可变字体之间还是有很多区别的。

在 font-weight 上面踩坑了，对于常规字体而言，这个有点像一个由前端工程师掌控的到别名的映射，但是对于可变字体而言，font-weight 就是由字体设计师掌控的属性了。

IME 输入法的相关问题

• [CSS]浏览器IME输入法控制禁止输入中文

• preventDefault() of keydown event should not kill composition start caused by the keydown

• beforeinput shouldn’t be fired before compositionstart for backward compatibility

• How can I reliably cancel a compositionstart event?

• 解决实现实时监测用户输入内容的长度并做限制的功能时遇到的问题

• 你不知道的DOM输入事件

• 在input框输入中文的时候，怎么样设置在input框不显示英文

这个应该算是前端的一个坑，要做一个输入的字数限制，被 IME 卡住，最后也没有完美的解决，而是用了一个妥协的方案。总体而言 IME 这块还是得听浏览器的，阻止未必生效，只能监听之后写一些代码模拟效果。

增大元素的点击面积

• 前端如何提高用户体验：增强可点击区域的大小

• 使用 CSS 在不影响视觉效果的情况下增大元素的点击面积

使用伪元素来处理点击区域扩大的问题还是比较合适的，但是有一点需要注意，就是不能同时和 overflow:hidden 放在一起，否则就不生效了。