CSS技巧精粹-优快云博客

本文分享了多项CSS实用技巧，包括解决字体锯齿、文本换行、页面闪烁、硬件加速、touch事件、用户选择文本禁用、元素编辑状态、图片运动模糊等问题的方法，适用于提升网页性能与用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、-webkit-font-smoothing 字体锯齿

div {
    -webkit-font-smoothing: antialiased; 
}

View Code

2、css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

View Code

3、使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

View Code

4、CSS开启硬件加速

-webkit-backface-visibility: hidden;

View Code

5、-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

View Code

6、清除手机tap事件后ele时候出现的一个高亮

ele{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

View Code

7、user-select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

View Code

8、contenteditable 设置element是否可编辑

<div contenteditable="true">可编辑</div>

View Code

9、图片运动过程中，图片模糊问题

transform: translate3d(0, 0, 0);

View Code

转载于:https://www.cnblogs.com/vhen/p/7567141.html

CSS优化+技巧