css3面试题,/ 过渡 /

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像素时，布景色彩将变为赤色。

CSS3的过渡和动画特性使得网页元素的改变愈加滑润和天然。过渡能够在两个状况之间滑润地切换，而动画则能够创立接连的动作。

```css

/ 过渡 /

div {

width: 100px;

height: 100px;

background-color: red;

transition: width 2s;

div:hover {

width: 200px;

/ 动画 /

@keyframes example {

from {background-color: red;}

to {background-color: blue;}

div {

animation-name: example;

animation-duration: 4s;

伪元素和伪类是CSS3中用于挑选特定元素状况的挑选器。伪元素用于创立不在文档树中的元素，而伪类用于挑选具有特定状况或特点的元素。

```css

/ 伪元素 /

p::after {

content: \