CSS3
本话题发布CSS3相关的问答文章和技术分享，将持续更新，为您推荐了23篇问答，访问即可查看更多精彩内容。
-
1
回答
29浏览
为什么我的CSS动画在移动端卡顿严重？
我在做一个移动端的下拉刷新效果，用的是纯CSS动画，但真机测试时特别卡，尤其是低端安卓机。我试过加了transform: translateZ(0)开启硬件加速，还是没改善。 动画代码是这样的： @k...
-
1
回答
34浏览
PostCSS 自动加浏览器前缀不生效是怎么回事？
我用 PostCSS 配合 autoprefixer 插件，想让 CSS 自动加上浏览器前缀，但写完之后发现像 display: flex 这样的属性根本没加前缀。我明明在 postcss.confi...
-
1
回答
39浏览
PostCSS 能处理 Vue 中的 CSS-in-JS 写法吗？
我最近在 Vue 项目里尝试用 CSS-in-JS 的方式写样式，比如把样式对象直接写在 setup 里，然后绑定到 :style 上。但发现 PostCSS 插件（比如 autoprefixer）好...
-
1
回答
53浏览
PostCSS插件怎么处理HTML里的内联样式？
我写了个PostCSS插件想自动给CSS加前缀，但发现它只处理了单独的CSS文件，HTML里style属性的内联样式完全没被处理，这咋办？ 试过用posthtml配合postcss，但配置太复杂还报错...
-
2
回答
35浏览
CSS关键帧动画在Vue里为什么不生效？
我在Vue组件里写了个简单的淡入动画，但页面上完全没反应，控制台也没报错。关键帧定义和animation属性都写了，是不是哪里写错了？ 我试过把keyframes放在里面，也试过移到全局样式，都不行。...
-
1
回答
72浏览
PostCSS 自定义 Parser 解析 HTML 内联样式失败怎么办？
我尝试用 PostCSS 的自定义 parser 去解析一段 HTML 里的 style 属性，但发现它根本没被处理，是不是 PostCSS 只能处理独立的 CSS 文件？ 我已经写了 parser ...
-
1
回答
60浏览
CSS transform旋转后元素位置偏移了怎么办？
我用 transform: rotate(45deg) 旋转一个正方形div，结果它整个位置都跑偏了，不是绕着自己的中心转，而是像被甩出去了一样。明明没改left/top，为啥会这样？ 我试过加 tr...
-
2
回答
17浏览
BEM命名中嵌套块的类名该怎么写才规范？
我最近在用 BEM 写一个商品卡片组件，结构大概是“卡片里有标题、价格、按钮”。按照 BEM 规范，主块是 product-card，那里面的按钮应该叫 product-card__button 没问...
-
1
回答
35浏览
postcss-nested 嵌套写法不生效是怎么回事？
我用 Vite + PostCSS 配置了 postcss-nested，但写嵌套 CSS 时完全没效果，编译后还是原样输出，是不是插件没生效？ 我已经在 postcss.config.js 里加了插...
-
1
回答
26浏览
CSS混合模式为啥在背景图上不生效？
我给一个div加了背景图，然后想用mix-blend-mode: multiply让它和下面的文字混合，但完全没效果，是哪里不对？ 试过给父容器加isolation: isolate也没用，代码大概是...
-
1
回答
57浏览
CSS变量在媒体查询里为啥不生效？
我在写响应式布局时，想用CSS变量控制不同屏幕下的字体大小，但发现媒体查询里修改变量后，页面没反应。明明语法看起来没问题啊。 我试过这样写： :root { --font-size: 16px; } ...
-
1
回答
58浏览
媒体查询在手机上不生效是怎么回事？
我写了一个媒体查询，想在手机上把字体变小点，但在真机上完全没反应。我用的是 @media (max-width: 768px)，本地浏览器模拟器里是好的，一到手机就失效了。 是不是漏了什么 meta ...
-
1
回答
20浏览
CSS混合模式为什么在背景图上不生效？
我给一个div设置了背景图，然后想用mix-blend-mode: multiply让它和下面的色块混合，但完全没效果，是哪里写错了吗？ 试过给父容器加isolation: isolate也没用，代码...
-
1
回答
27浏览
CSS关键帧动画为什么不生效？
我写了个简单的淡入动画，但加到元素上完全没反应，控制台也没报错。试过改animation-name和调用方式，还是不行。 关键帧代码是这样写的： @keyframes fadeIn { from { ...
-
2
回答
38浏览
给图片加旋转变形后位置偏移了怎么办？
我给图片加了transform: rotate(30deg)，但位置突然偏到一边了，调整margin也不对，这是为什么？ 代码是这样的： <div class="photo-container"...
-
1
回答
40浏览
Flex容器动态添加子项后，子项溢出且无法垂直居中怎么办？
我在用Flex布局做一个卡片列表，通过JavaScript动态添加子元素时遇到了问题。设置了flex-wrap和align-items: center，但新添加的子项要么溢出容器，要么垂直位置错乱。 ...
-
2
回答
42浏览
媒体查询在手机和桌面设备上没生效怎么办？
我在给网站做响应式布局时，写好了媒体查询，但手机和桌面样式完全没变化。比如这个导航栏，想让手机端显示汉堡菜单，桌面端显示横向菜单： @media screen and (max-width: 600p...
-
1
回答
47浏览
PostCSS Stringifier处理动态类名时样式输出不完整怎么办？
我在React项目里用PostCSS自定义了一个stringifier插件，想把动态生成的类名统一加上前缀。但发现处理后的CSS某些属性直接被去掉了，比如这个按钮组件的padding样式完全没输出： ...
-
2
回答
48浏览
PostCSS插件如何处理CSS-in-JS中的动态类名？
在用Styled Components写嵌套样式时，发现postcss-nested插件对动态生成的类名不起作用。比如这样写： const Component = styled.div .${dyna...
-
2
回答
37浏览
为什么我的CSS线性渐变背景在移动端显示不完整？
大家好，我在做一个移动端页面时遇到个奇怪的问题。给导航栏设置了线性渐变背景，电脑上显示正常，但手机上左边三分之一的位置变成了纯色块。 我检查了代码发现是这样写的： .nav-bar { backgro...
