conic-gradient 和 repeating-conic-gradient 有什么区别？怎么用它们画饼图？
conic-gradient 沿圆心扫一圈画完，repeating-conic-gradient 自动重复填满 360 度。讲解用锥形渐变画饼图的写法、色块硬边技巧、与径向渐变的区别，以及常见的角度换算错误。
核心关键词CSS conic-gradient 与 repeating-conic-gradient 区别
面试知识索引 · 分类、标签与搜索
5000+ 道程序员面试题，每题都有完整答案
程序员面试题库第 25 页，收录第 1201–1250 题，共 5000 道完整解析，覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
5000+完整问题
52技术分类
178检索标签
100索引分页
快速定位
分类、标签与关键词搜索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
热门标签178 个
查看其余 163 个标签
测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
第 25 页
本页面试问题
按稳定语义路径排序
- 1201
- 1202
CSS 动画里频繁改自定义属性，为什么会卡？
CSS 自定义属性在动画中频繁修改会触发样式重算和布局回流，导致掉帧。了解浏览器对自定义属性和原生属性的处理差异，掌握用 @property 注册后走合成层的优化方案。
核心关键词CSS 动画中修改自定义属性 性能问题 - 1203
用 transition 做 grayscale() 的去色动画，性能上要注意什么？
给图片加 filter: grayscale() 后用 transition 平滑去色的写法很简单，但 filter 过渡每帧都要重新计算像素，图片大或数量多时容易掉帧。了解 will-change 提升合成层和限制作用域的优化手段。
核心关键词CSS filter grayscale 过渡动画 性能 - 1204
filter 不是继承属性，为什么子元素也跟着模糊了？
filter 在 CSS 规范里是非继承属性，子元素不会自动获得父元素的 filter 值。但父元素的 filter 作用于整个渲染结果，子元素作为其中一部分自然受影响。搞清渲染时机和继承的区别，才能正确给子元素做豁免。
核心关键词CSS filter 是否继承 子元素视觉影响 - 1205
给父元素加了 filter，子元素的 fixed 定位为什么失效了？
父元素设了 filter 后会创建新的层叠上下文，同时改变 fixed 定位子元素的包含块。子元素不再相对于视口定位，而是相对于带 filter 的父元素。了解哪些属性会产生同样的副作用，以及实际项目中的解决方案。
核心关键词CSS filter 层叠上下文 fixed 子元素影响 - 1206
linear-gradient 里 0deg 是朝上还是朝右？角度怎么影响渐变方向？
linear-gradient 的角度以元素正上方为 0deg，顺时针旋转。0deg 从下往上渐变，90deg 从左往右，180deg 从上往下。掌握角度和方向关键字的对应关系，能快速判断渐变走向。
核心关键词CSS linear-gradient 角度与渐变方向 - 1207
linear-gradient 里两个色标写在同一位置，为什么会出现硬边？
线性渐变会在相邻色标之间插值；两个不同颜色的色标落在同一位置时，插值区间消失，颜色会出现硬边。条纹背景和进度条分段可以用这个特点实现，色标顺序、百分比位置和透明色叠加则决定边界是否如预期。
核心关键词CSS 渐变色标同位置 硬边效果原理 - 1208
怎么用 conic-gradient 做一个圆环进度条？
conic-gradient 能沿角度分出扇形，配合圆角可形成饼图；中心再遮一层圆或使用 mask 就得到圆环进度。数值变化可驱动色标位置，边缘锯齿、超出范围和可访问文本仍要处理。
核心关键词CSS conic-gradient 圆环进度条 - 1209
关键帧动画里写了 display 这种不可插值的属性，浏览器会怎么处理？
关键帧中写入不可平滑插值的属性时，动画会按离散规则切换，而不是产生连续变化。display 与 visibility 的切换时机不完全一样；做淡出或退出效果时，通常需要把透明度动画与元素最终隐藏的时间点协调起来。
核心关键词CSS keyframes 不可插值属性 display 处理 - 1210
transform 里同时写 translate、rotate、scale，顺序不同结果为什么不一样？
transform 中多个变换函数会按矩阵顺序组合；先写 rotate 再写 translate，与反过来写会得到不同轨迹。父子坐标系和变换原点还会影响视觉结果，排查“位移方向不对”时应先看函数次序。
核心关键词CSS transform 多函数顺序与矩阵乘法 - 1211
怎么用 CSS 让文字显示渐变色？
渐变文字通常把 linear-gradient 作为背景，再用 background-clip: text 裁到字形内，并让文字填充透明。缺少其中一步可能只看到普通文字或整块背景；浏览器前缀、选中态和暗色模式还会影响最终可读性。
核心关键词CSS background-clip text 渐变文字 - 1212
用 prefers-reduced-motion 覆盖动画时，为什么不该直接删除 transition？
系统开启减少动态效果后，页面应减少大幅位移、闪烁或自动播放，必要的状态反馈仍可保留。prefers-reduced-motion 媒体查询可切换时长或替换动画形式；只把动画时长改成极短值，可能影响依赖动画结束事件的代码。
核心关键词prefers-reduced-motion 覆盖动画 可访问性 - 1213
radial-gradient 里 ellipse 和 circle 有什么区别？怎么控制渐变的中心和大小？
radial-gradient 可用 circle 或 ellipse 约束渐变形状，用 at 调整中心点，再用 closest-side、farthest-corner 等关键字决定终点。容器长宽变化会改变椭圆的观感；背景位置和渐变中心也不能当成同一个参数。
核心关键词CSS radial-gradient ellipse 与 circle 区别 - 1214
除了 CSS 动画，prefers-reduced-motion 还能用在滚动行为和 JS 动画上吗？
减少动态效果的偏好不只影响 CSS 动画，还涉及平滑滚动、脚本驱动的过渡和第三方动画库。CSS 可用媒体查询覆盖相关属性，JavaScript 可借助 matchMedia 读取并监听变化；设置切换后运行中的动画也应得到处理。
核心关键词prefers-reduced-motion 优化滚动与 JS 动画 - 1215
用 CSS 做打字机效果时，steps() 和线性过渡有什么区别？
steps() 把连续时间切成离散跳变，常用于打字机效果和逐帧精灵图；它不会像 linear 那样在两帧之间平滑插值。步数、跳变发生在区间起点还是终点，以及文字宽度与字符数是否匹配，都会影响最后一帧。
核心关键词CSS steps() 打字机效果 - 1216
perspective 和 perspective-origin 怎么影响 CSS 3D 变换的视觉效果？
CSS perspective 决定三维变换的透视强度：距离值越小，近大远小越明显；perspective-origin 则改变观察中心。父元素设置 perspective 与元素自身使用 perspective() 函数的作用范围不同，翻转卡片时还要检查背面可见性。
核心关键词CSS perspective 与 perspective-origin 3D 效果 - 1217
transform-origin 怎么影响旋转和缩放的效果？
transform-origin 决定 rotate、scale 等变换围绕哪里进行，同样旋转角度，中心点与左上角作为原点会画出不同路径。百分比原点相对元素自身盒子计算，变换后的视觉位移还与元素尺寸有关。
核心关键词CSS transform-origin 对 rotate scale 的影响 - 1218
父元素设了 transform，子元素的 fixed 定位为什么失效了？
父元素应用 transform 后会为固定定位后代建立新的包含块，position: fixed 子元素可能不再固定于视口，而是跟随父组件。需要视口级弹层时，可把元素通过 Portal 移出该祖先，或避免在祖先上施加变换。
核心关键词CSS transform 父元素 fixed 定位包含块 - 1219
preserve-3d 和 flat 对嵌套 3D 变换的效果有什么区别？
transform-style: preserve-3d 让子元素保留在父元素的三维空间中，flat 则把它们压到父元素平面。翻牌与立方体效果需要检查父子两级的设置；某些会产生分组绘制的属性也可能迫使结果变平。
核心关键词CSS transform-style preserve-3d 与 flat 区别 - 1220
CSS 独立的 rotate、scale、translate 属性和 transform 里的函数有什么区别？
独立的 rotate、scale、translate 属性可分别过渡，并按固定次序与 transform 组合；它们不等同于随意调换 transform 函数顺序。迁移旧动画时要检查最终变换矩阵、级联覆盖和目标浏览器支持情况。
核心关键词CSS rotate scale translate 独立属性与 transform 函数 - 1221
translate 里的百分比到底是相对自身还是相对父元素？
translate 百分比是相对元素自身的宽高，不是父元素。translateX 百分比参照自身宽度，translateY 参照自身高度。这个特性常用于不知道元素尺寸时的居中定位。
核心关键词CSS translate 百分比 相对自身还是父元素 - 1222
transitionend 事件怎么判断是哪个属性结束的？过渡被取消还会触发吗？
transitionend 会按实际完成过渡的属性分别触发，可用 propertyName 过滤需要等待的那一个。过渡被中途取消可能触发 transitioncancel 而没有 transitionend；时长为零、元素被移除或目标值未改变时，也不能盲等结束事件。
核心关键词CSS transitionend 事件 propertyName 判断 - 1223
为什么 height 从 0 到 auto 不能做过渡？怎么实现平滑展开收起？
height 从 0 到 auto 通常缺少可直接插值的明确终点，展开面板需要选择替代策略。max-height 技巧会让时长随内容变化，Grid 行高方案依赖布局结构；支持 interpolate-size 的环境可直接处理固有尺寸，但仍要考虑兼容性。
核心关键词CSS transition height auto 平滑展开收起 - 1224
过渡进行到一半又改了目标值，浏览器怎么处理？
过渡未完成就更换目标值，浏览器通常从当前插值状态转向新目标，反向过渡还可能采用缩短后的时长。按钮连续悬停或抽屉快速开合会暴露这一点；若看到状态跳动，应确认是过渡被打断还是动画被重新创建。
核心关键词CSS transition 中断时如何计算目标值 - 1225
怎么让一个元素的 width 和 opacity 用不同的过渡时长和缓动？
同一元素的透明度和位移可以分别指定过渡时长、缓动曲线和延迟，transition 简写里的逗号会形成多组属性设置。列表长度不一致时值会循环匹配；面板开合时应对照计算后的样式，确认每项声明落到了预期属性上。
核心关键词CSS transition 多属性不同时长缓动 - 1226
transition-property 写 all 和只列具体属性，性能上有区别吗？
对比 transition-property 取 all 与显式列出属性的实际差异：浏览器只为变化属性创建过渡，帧开销接近；真正区别在意外过渡触发、时长不可拆分和维护风险。
核心关键词CSS transition-property all 性能差异 - 1227
cubic-bezier 四个参数分别控制什么？
cubic-bezier() 的四个数定义控制点；两个 x 坐标必须在 0 到 1 之间，y 坐标可以越界并产生回弹或超冲。ease 等关键字对应固定曲线，自定义动效时要同时观察起步、收尾和中段速度，不能只看总时长。
核心关键词CSS cubic-bezier 自定义缓动曲线 - 1228
CSS transition 什么时候会触发？display 变化能过渡吗？
transition 需要同一元素的计算后样式发生变化，并且浏览器能识别变化前后的状态。颜色、透明度等属性可插值，display 等离散属性要配合 transition-behavior: allow-discrete；入场还常需 @starting-style 给出起始状态。
核心关键词CSS transition 触发条件 display none 过渡 - 1229
为什么淡出动画要同时用 opacity 和 visibility？
只把元素 opacity 降为零，透明区域仍可能接收点击和焦点。把 visibility 的切换延后到淡出完成，可让退出动画结束后再隐藏；重新显示时延迟规则也要配套调整，否则元素可能先不可见再突然出现。
核心关键词CSS transition visibility 淡入淡出 延迟挂载 - 1230
transition 和 animation 怎么选？
transition 适合按钮悬停、面板开合这类在两种状态间切换的效果；animation 适合多关键帧、循环或自动播放。两者的触发方式、暂停控制和结束状态处理不同，选型应取决于动效是否需要独立时间线。
核心关键词CSS transition 与 animation 如何选择 - 1231
flex 容器里放一个绝对定位的子元素，布局会怎样？
flex 容器里的绝对定位子项不参与弹性布局，不占空间也不被 flex-grow 分配。但容器加了 position: relative 后仍然是它的包含块，定位坐标从容器 padding 边开始算。
核心关键词flex 绝对定位子项 static position - 1232
单行 flex 容器里 align-content 为什么不生效？
默认不换行的 Flex 容器只有一条 flex 行，align-content 没有可分配的行间空间，设置它通常看不到效果。单行子项的交叉轴位置由 align-items 控制；多行容器还需有多余的交叉轴空间才能体现行组对齐。
核心关键词align-content single line - 1233
align-content 设成 space-between 后行间距是怎么分的？
多行 Flex 容器只有交叉轴留有空白时，线与线之间的剩余空间才会被分散；只有一行或容器高度随内容增长时，改这个值可能看不到效果。通过固定高度的两行卡片对照项目对齐和线组对齐。
核心关键词align-content space-between rows - 1234
align-content 和 align-items 到底怎么分工？
align-content 管的是多条 flex line 之间的交叉轴空间分配，align-items 管的是每条 line 内部子项的对齐。两者作用层级不同，必须配合 flex-wrap: wrap 才能看到 align-content 的效果。
核心关键词align-content multi-line flex - 1235
flex-direction 改成 column 后 align-items 对齐的是哪个方向？
flex-direction: column 时交叉轴变成水平方向，align-items: center 让子项水平居中。很多人以为 align-items 永远管垂直方向，其实它管的是交叉轴，方向随 flex-direction 变化。
核心关键词align-items center column - 1236
align-items 默认值 stretch 在什么条件下才会拉伸子项？
align-items 的默认值是 stretch，会让子项在交叉轴方向拉伸填满 flex line 的高度。但前提是子项没有设显式高度，一旦写了 height，stretch 就不起作用了。
核心关键词align-items stretch flex - 1237
align-self 怎么覆盖 align-items 的效果？
align-self 让单个 flex 子项覆盖容器的 align-items 设定，独立控制自己在交叉轴上的对齐方式。它和 justify-content 互不干扰，一个管交叉轴，一个管主轴。
核心关键词align-self override - 1238
flex 子项在交叉轴上用 margin auto 会怎样？
flex 子项在交叉轴方向设 margin auto 会吸收行内所有剩余空间，效果相当于覆盖了 align-items。比如 margin-top: auto 把子项推到底部，比 align-self: flex-end 优先级更高。
核心关键词flex margin auto cross-axis - 1239
flex-grow 和 margin auto 同时用会怎样？
flex-grow 和 margin auto 都想吃剩余空间，但 auto margin 先结算。margin auto 吃完空间后 flex-grow 就无事可做了。空间不够时 auto margin 变成 0，shrink 正常工作。
核心关键词flex-grow margin auto conflict - 1240
align-items 设成 baseline 对齐的是什么？
align-items: baseline 让 flex 子项按第一行文字的基线对齐，而不是按盒子的边缘。当子项字号不同或 padding 不同时，文字仍然整齐排列。适合混排按钮、标题和标签的场景。
核心关键词align-items baseline flex - 1241
flex 布局里的主轴和交叉轴是怎么定义的？
flex 布局的核心是两条轴：主轴和交叉轴。主轴由 flex-direction 决定，交叉轴永远垂直于主轴。理解了轴的概念，justify-content 和 align-items 的方向就不会搞混。
核心关键词flex 主轴交叉轴 书写模式 - 1242
column 方向下 align-content stretch 能让各列等宽吗？
flex-direction: column 加 flex-wrap: wrap 时，align-content: stretch 会让各列在交叉轴（水平方向）上等分容器宽度。每列分到相同的宽度，子项在各自列里占满这个宽度。
核心关键词align-content stretch column wrap - 1243
column wrap 布局各列为什么等高？能做瀑布流吗？
纵向排列的 Flex 项要换列，容器必须提供可用的主轴高度；每列的项目按这个高度分组，而列宽取决于项目与剩余横向空间。对比固定高度分栏和真正瀑布流，说明为何列底会留白、默认拉伸也不保证各列等宽。
核心关键词flex column wrap 等高列 瀑布流 - 1244
多行 flex 容器没设高度时，行高是怎么算的？
多行 flex 容器没有显式高度时，容器高度由内容撑开。每行的高度等于行内最高子项的高度，行与行紧挨着排列，没有多余空间给 align-content 分配。 同时说明未限定高度时为何通常只随内容增长。
核心关键词flex 多行容器 无显式高度 行高 - 1245
交叉轴在 row 和 column 下分别是什么方向？
flex 交叉轴永远垂直于主轴。flex-direction: row 时交叉轴垂直，column 时交叉轴水平。align-items 和 align-content 都作用在交叉轴上，方向随 flex-direction 变化。
核心关键词flex 交叉轴 垂直 - 1246
flex-flow 的常见组合在移动端布局里怎么用？
移动端导航使用不同的方向与换行组合，会决定项目是水平换行还是纵向换列。结合固定高度、收缩因子和沟槽计算，说明默认单行布局为何仍可缩小，以及响应式卡片一行三列时如何准确扣除两道间距。
核心关键词flex-flow row column wrap - 1247
flex-basis 设成 auto 和 content 有什么区别？
flex-basis: auto 会先看子项有没有设 width，有就用 width，没有就按内容大小。flex-basis: content 则完全忽略 width，始终按内容大小来算。两者在子项没设 width 时效果一样。
核心关键词flex-basis auto content - 1248
flex-basis 的百分比是相对谁算的？
flex-basis 百分比相对容器的主轴内部尺寸计算。容器没有明确尺寸时百分比回退为 content。还要注意 flex-basis: 0 和 flex-basis: 0% 的区别：0 不会触发百分比解析，0% 会。
核心关键词flex-basis percentage - 1249
flex-direction 的 row 和 column 有什么区别？
flex-direction: row 让子项水平排列，column 让子项垂直排列。切换方向后 justify-content 和 align-items 管的方向也跟着翻转。column 下子项的宽度默认填满容器，高度由内容决定。
核心关键词flex-direction row column 主轴 - 1250
flex-grow 是怎么按比例分配剩余空间的？
flex-grow 分配的是容器剩余空间，不是总空间。计算方式：先算出剩余空间（容器 - 所有子项 flex-basis 之和），再按各子项 flex-grow 的比例分配。flex-grow: 2 的子项比 1 的多分一倍。
核心关键词flex-grow 分配公式