核心内容摘要
百度技术培训中心
网站SEO优化中的关键词排名监控与调整
01把“蓝框”关掉：outline 与 caret-color1.1 > 输入框默认的“蓝边”其实是 outline 把焦点放到 上，浏览器会自带一圈蓝色外框，这圈光就是 outline。想隐藏它？直接给元素加 即可；想换颜色？把 写成 就能自定义。1.2 > 闪烁的竖线 | 叫 caret，颜色可调 光标在文本框里一闪一闪的部分叫 caret，默认颜色继承文本色。想让它“显眼”一点，只需给文档加一句 ，瞬间红光四射，夜间码字再也不用眯眼找光标。 02手机点击的“蓝框”：-webkit-tap-highlight-color 在移动端点链接、按钮，手指离开时会留下一圈半透明蓝框，这是浏览器的默认高亮。若想让它“隐身”，可给元素设 ——蓝框秒没，触控反馈更干净。 03平滑滚动：scroll-behavior 传统锚点跳转是“咣当”一下定位，用户体验生硬。给滚动容器加 ，再配合 定位，浏览器就会自动插值过渡，像这样： ```css .container { scroll-behavior: smooth; } ``` 04分页加载不乱套：overflow-anchor 无限滚动时最怕“加载完自动滚到底”。把容器 设为 可锁定滚动位置，新增内容不会把视图“拽”下去，分页体验更可控。 05一次滑一格：scroll-snap 做卡片轮播或时间轴时，用户轻滑即跳到下一张，无需“滑过半截”。只需给滚动容器加两行： ```css .container { scroll-snap-type: x mandatory; } .item { scroll-snap-align: start; } ``` 06300ms 点击延迟：touch-action 移动端点击事件会先等 300 ms 再触发，防止误判双击放大。若你确认手势不会被误用，给元素加 可立刻移除延迟，提升点击响应速度。 07字体渲染两把刷子：font-smooth Mac 与 Windows 的字体锯齿差异让人抓狂？用两行小技巧即可统一： ```css body { webkit-font-smoothing: antialiased; / Chrome/Safari / moz-osx-font-smoothing: grayscale; / Firefox / } ``` antialiased 提供边缘柔化，grayscale 把字体描边转灰阶，两者叠加让文字瞬间“圆润”。 08结语 这些属性平时很少主动想起，一旦忘光却能把整站体验拉回“车祸现场”。下次遇到蓝框、突跳、延迟、锯齿字，别急着写 JS，先翻翻这篇小抄——CSS 就能救场。举报/反馈
