css3面试题,/ 过渡 /

前端开发 2024-12-30 7

CSS3 面试题

根底篇

1. CSS3 新增了哪些挑选器？特点挑选器 `qwe2 伪类挑选器伪元素挑选器伪状况挑选器通用兄弟挑选器 2. CSS3 中怎么完成暗影作用？运用 `boxshadow` 特点增加盒子暗影。运用 `textshadow` 特点增加文字暗影。3. CSS3 中怎么完成圆角作用？运用 `borderradius` 特点增加圆角。4. CSS3 中怎么完成过渡作用？运用 `transition` 特点界说过渡作用。需求指定过渡特点、过渡时刻、过渡作用等。5. CSS3 中怎么完成动画作用？运用 `@keyframes` 规矩界说动画。运用 `animation` 特点运用动画。需求指定动画称号、动画时刻、动画作用等。

进阶篇

1. CSS3 中怎么完成布景图片的突变作用？运用 `lineargradient` 函数创立线性突变。运用 `radialgradient` 函数创立径向突变。2. CSS3 中怎么完成布景图片的缩放和裁剪？运用 `backgroundsize` 特点操控布景图片的巨细。运用 `backgroundrepeat` 特点操控布景图片的重复方法。运用 `backgroundposition` 特点操控布景图片的方位。3. CSS3 中怎么完成多列布局？运用 `columncount` 特点指定列数。运用 `columngap` 特点指定列距离。运用 `columnrule` 特点指定列边框。4. CSS3 中怎么完成弹性盒模型？运用 `display: flex;` 界说弹性容器。运用 `flexdirection` 特点指定主轴方向。运用 `justifycontent` 特点指定主轴上的对齐方法。运用 `alignitems` 特点指定穿插轴上的对齐方法。5. CSS3 中怎么完成网格布局？运用 `display: grid;` 界说网格容器。运用 `gridtemplatecolumns` 和 `gridtemplaterows` 特点界说网格结构。运用 `gridcolumn` 和 `gridrow` 特点定位网格项。

实战篇

1. 怎么运用 CSS3 完成一个呼应式导航栏？2. 怎么运用 CSS3 完成一个轮播图？3. 怎么运用 CSS3 完成一个卡片式布局？4. 怎么运用 CSS3 完成一个登录表单？

学习资源

祝你面试顺畅！

CSS3面试题解析：把握这些，轻松应对面试应战

CSS3是层叠款式表（Cascading Style Sheets）的第三个首要版别，它扩展了CSS2.1的功用，引入了许多新的特性，如动画、过渡、媒体查询、字体图标等。CSS3的意图是使网页规划愈加丰厚和动态。

媒体查询是CSS3中十分有用的特性，它答应开发者依据不同的设备特性（如屏幕尺度、分辨率等）运用不同的款式。例如：

```css

@media screen and (max-width: 600px) {

body {

background-color: red;

这段代码表明当屏幕宽度小于或等于600像素时，布景色彩将变为赤色。