CSS面试题及详细答案140道之（121-140）

nodejs，mangoDB，MySQL，Linux… 。

前后端面试题-专栏总目录

一、本文面试题目录

121. 解释aspect-ratio属性的作用。

答：aspect-ratio允许你定义元素的理想宽高比，有助于保持比例不变，特别适用于响应式设计。例如：

.aspect-ratio-box {aspect-ratio: 16 / 9;
}

122. 如何在CSS中实现图片的模糊边缘效果？

答：可以使用box-shadow或filter: blur()来添加模糊效果。例如，使用filter添加模糊：

.blur-image {filter: blur(5px);
}

123. 解释@media查询的不同类型。

答：包括基于宽度、高度、分辨率、方向等条件的应用样式规则。例如，针对宽度小于600px的设备应用特定样式：

@media (max-width: 600px) {body { background-color: lightblue; }
}

124. 如何在CSS中实现一个带有阴影的文字效果？

答：使用text-shadow属性来添加文字阴影，可以指定水平偏移、垂直偏移、模糊半径和颜色。例如：

.text-shadow {text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

125. 解释font-feature-settings属性的作用。

答：用于启用或禁用OpenType字体特性，比如连字、旧式数字等。例如：

.old-style-nums {font-feature-settings: "onum";
}

126. 如何在CSS中实现响应式的字体大小？

答：利用vw, vh, vmin, vmax单位根据视口大小调整字体大小，或者使用clamp()函数结合最小值、首选值和最大值。例如：

h1 {font-size: clamp(1rem, 4vw, 3rem);
}

127. 解释caret-color属性的作用。

答：更改文本输入框内光标的颜色。例如：

input {caret-color: red;
}

128. 如何在CSS中实现图片的懒加载？

答：除了使用原生的loading="lazy"外，还可以通过JavaScript监听滚动事件并在适当时候加载图片资源。例如，HTML:

<img src="image.jpg" loading="lazy">

129. 解释touch-action属性的作用。

答：控制触摸屏设备上的默认触控行为，可用于优化用户体验，例如阻止双击缩放。例如：

.prevent-zoom {touch-action: manipulation;
}

130. 如何在CSS中实现响应式的导航栏？

答：利用媒体查询调整导航栏布局，在小屏幕上切换为汉堡菜单，并通过JavaScript处理交互逻辑。例如：

@media (max-width: 600px) {nav ul {display: none;}.toggle-menu {display: block;}
}

---

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】

---

131. 解释line-clamp属性的作用。

答：限制段落显示的最大行数，并在最后一行末尾显示省略号。注意这是一个非标准属性，主要用于WebKit浏览器。例如：

.line-clamp {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
}

132. 如何在CSS中实现元素的旋转动画？

答：使用transform: rotate(deg)配合transition或animation来实现旋转效果。例如：

.rotate {animation: spin 2s linear infinite;
}@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}

133. 解释mix-blend-mode属性的不同取值。

答：包括normal, multiply, screen, overlay等多种混合模式，决定元素与其背景或其他元素之间的混合方式。例如：

.blended-text {mix-blend-mode: multiply;
}

134. 如何在CSS中实现响应式的视频嵌入？

答：确保视频容器具有固定的宽高比，通常使用padding-top百分比值来保持比例，然后让视频填充整个容器。例如：

.video-container {position: relative;width: 100%;padding-top: 56.25%; /* 16:9 */height: 0;
}.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

135. 解释object-fit属性的作用。

答：控制替换元素（如图像或视频）如何适应其容器，选项包括contain, cover, fill, none, scale-down。例如：

img {object-fit: cover;
}

136. 如何在CSS中实现自定义滚动条样式？

答：对于WebKit浏览器，可以通过伪类如::-webkit-scrollbar定制滚动条外观；其他浏览器可能需要依赖第三方库或插件。例如：

/* 自定义滚动条 */
::-webkit-scrollbar {width: 12px;
}::-webkit-scrollbar-thumb {background-color: darkgrey;border-radius: 10px;
}

137. 解释break-before, break-after, break-inside属性的作用。

答：控制分页媒体或列布局中元素内部发生分割的行为，防止不必要的页面中断。例如：

.break-before {break-before: page;
}

138. 如何在CSS中实现响应式的图片集？

答：使用媒体查询和灵活的网格布局系统（如CSS Grid或Flexbox），根据屏幕尺寸动态调整图片排列方式。例如：

.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;
}

139. 解释shape-outside属性的不同取值。

答：可以是基本形状（如圆形、椭圆）、路径数据或引用的盒模型边距，影响文本围绕元素的方式。例如：

.shape-outside-example {float: left;shape-outside: circle(50%);
}

140. 如何在CSS中实现元素的倾斜翻转效果？

答：结合transform: skewX(), skewY()进行倾斜变换，结合rotate()进行旋转变换。例如：

.skewed-element {transform: skewX(20deg);
}

二、140道面试题目录列表

文章序号	CSS面试题140道
1	CSS面试题及详细答案140道（1-20）
2	CSS面试题及详细答案140道（21-40）
3	CSS面试题及详细答案140道（41-60）
4	CSS面试题及详细答案140道（61-80）
5	CSS面试题及详细答案140道（81-100）
6	CSS面试题及详细答案140道（101-120）
7	CSS面试题及详细答案140道（121-140）