CSS3属性专项测试题（含详细答案解析）

CSS3属性专项测试题（含详细答案解析）适用人群：前端入门学习者、前端基础考核、面试基础刷题试卷说明：满分100分，答题时间60分钟；题型包含单选题、多选题、填空题、简答题、实操题，全面考察CSS3核心属性用法、特性及兼容要点。一、单项选择题（共15题，每题2分，共30分）1.下列属性中，不属于CSS3新增的是（）A.border-radiusB.box-shadowC.font-sizeD.opacity2.CSS3中实现元素圆角效果的核心属性是（）A.border-circleB.border-radiusC.round-borderD.border-corner3.关于CSS3opacity属性，说法正确的是（）A.取值范围0-1，0为完全不透明B.取值范围0-1，1为完全不透明C.仅能让文字透明，不影响背景D.取值可以为负数4.以下哪个属性可以为元素设置外阴影（）A.text-shadowB.box-shadowC.shadow-outD.outer-shadow5.CSS3transform属性中，实现元素水平缩放的函数是（）A.scaleY()B.scaleX()C.skewX()D.translate()6.transition过渡属性的核心作用是（）A.给元素添加动画关键帧B.让元素属性变化产生平滑过渡效果C.实现元素3D旋转D.改变元素布局规则7.CSS3中，设置文本自动换行、强制英文单词断行的属性是（）A.word-breakB.white-spaceC.text-wrapD.word-spacing8.下列哪个值可以让CSS3flex项目平均分配容器剩余空间（）A.flex:01autoB.flex:1C.flex:00100%D.flex:none9.CSS3background-size属性默认值是（）A.coverB.containC.autoD.100%10.实现元素3D透视效果，需要给父元素设置的属性是（）A.perspectiveB.transform-styleC.backface-visibilityD.3d-view11.CSS3中，box-sizing:border-box的作用是（）A.宽高仅包含内容区B.宽高包含内容+内边距+边框C.宽高包含内容+外边距D.取消元素盒模型12.以下属于CSS3动画关键帧规则的是（）A.@keyframesB.@mediaC.@font-faceD.@import13.CSS3中设置元素透明度且不影响子元素的方式是（）A.opacity:0.5B.background-color:rgba(0,0,0,0.5)C.filter:opacity(0.5)D.transparent14.flex布局中，设置主轴对齐方式的属性是（）A.align-itemsB.justify-contentC.align-contentD.flex-direction15.CSS3filter属性中，实现图片模糊效果的函数是（）A.brightness()B.blur()C.grayscale()D.contrast()二、多项选择题（共5题，每题3分，共15分，多选、少选、错选均不得分）1.下列属于CSS3盒模型新增属性/特性的有（）A.box-sizingB.box-shadowC.border-radiusD.margin2.CSS3transform支持的变换效果有（）A.平移translateB.缩放scaleC.旋转rotateD.倾斜skew3.关于CSS3过渡transition，可设置的参数包含（）A.过渡属性B.过渡时长C.过渡速度曲线D.过渡延迟时间4.下列属于CSS3新增选择器的有（）A.:nth-child()B.:hoverC.:last-childD.:first-of-type5.CSS3background新增特性包含（）A.background-sizeB.background-originC.background-clipD.多背景叠加三、填空题（共10空，每空2分，共20分）1.CSS3中，设置元素圆角为圆形（正圆）的快捷取值是border-radius:_________。2.flex布局中，_________属性用于设置侧轴对齐方式。3.CSS3文本阴影属性text-shadow的四个参数依次为：水平偏移、_________、模糊半径、阴影颜色。4.开启flex弹性布局，需要给容器设置_________。5.CSS3中_________属性可以规定3D元素如何保留其3D空间。6.@keyframes定义的动画，需要通过_________属性绑定到元素上才能生效。7.word-break:break-all的作用是_________。8.CSS3中_________属性可以隐藏元素背面，常用于3D翻转效果。9.background-clip:text的作用是_________。10.transition的默认过渡速度曲线是_________。四、简答题（共3题，每题5分，共15分）1.简述opacity和rgba实现透明效果的核心区别。2.简述box-sizing:content-box和box-sizing:border-box的区别。3.简述CSS3transition和animation的区别与适用场景。五、实操应用题（共2题，每题10分，共20分）1.写出完整CSS代码：实现一个宽200px、高200px的方块，具备以下效果：①10px圆角；②灰色外阴影；③鼠标悬浮时0.3秒平滑放大1.1倍；④背景为半透明黑色。2.写出基础CSS代码：实现一个简单的flex水平居中、垂直居中布局，适配任意子元素。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：font-size是CSS2原生属性，border-radius、box-shadow、opacity均为CSS3新增核心属性。2.答案：B解析：CSS3唯一圆角属性为border-radius，无其他替代属性。3.答案：B解析：opacity取值范围0-1，0为完全透明，1为完全不透明；该属性会让元素整体（内容、背景、子元素）透明，不支持负数取值。4.答案：B解析：text-shadow是文本阴影，box-shadow是元素盒子阴影，无shadow-out、outer-shadow属性。5.答案：B解析：scaleX()水平缩放，scaleY()垂直缩放，skewX()水平倾斜，translate()平移。6.答案：B解析：transition是过渡效果，用于实现属性变化的平滑动画；关键帧动画由@keyframes实现。7.答案：A解析：word-break:break-all可强制英文单词、长字符断行换行；white-space用于控制空格和换行显示。8.答案：B解析：flex:1等价于flex:110%，项目可伸缩，自动平分容器剩余空间。9.答案：C解析：background-size默认值为auto，保持图片原始尺寸；cover、contain为CSS3新增取值。10.答案：A解析：perspective为父元素设置透视距离，开启3D视觉效果；transform-style用于保留子元素3D空间。11.答案：B解析：border-box为怪异盒模型，元素设置的宽高包含内容、内边距、边框，不会撑大盒子；content-box为标准盒模型，宽高仅包含内容区。12.答案：A解析：@keyframes是CSS3动画关键帧规则；@media为媒体查询，@font-face为自定义字体，@import为样式导入。13.答案：B解析：opacity和filter:opacity()都会继承透明效果，影响子元素；rgba仅让背景色透明，不影响元素内部文字、子元素。14.答案：B解析：justify-content控制主轴对齐，align-items控制单行侧轴对齐，align-content控制多行侧轴对齐。15.答案：B解析：blur()实现模糊，brightness()调整亮度，grayscale()灰度化，contrast()调整对比度。二、多项选择题答案及解析1.答案：ABC解析：margin是CSS2基础属性，其余均为CSS3盒模型新增特性。2.答案：ABCD解析：CSS3transform四大基础变换：平移、缩放、旋转、倾斜，同时支持2D和3D效果。3.答案：ABCD解析：transition完整参数：transition:过渡属性时长速度曲线延迟时间。4.答案：ACD解析：:hover是CSS2伪类，:nth-child()、:last-child、:first-of-type均为CSS3新增结构伪类选择器。5.答案：ABCD解析：CSS3全面升级background属性，新增尺寸、定位区域、裁剪区域，同时支持多背景叠加。三、填空题答案及解析1.50%解析：border-radius设置50%，可让正方形元素变为正圆形。2.align-items解析：flex布局主轴justify-content，侧轴align-items。3.垂直偏移解析：text-shadow：x偏移y偏移模糊值颜色。4.display:flex解析：给父容器设置该属性，即可开启弹性布局。5.transform-style:preserve-3d解析：保留元素3D空间，是实现3D动画的基础属性。6.animation解析：通过animation绑定关键帧动画，设置时长、播放次数等参数。7.强制文本换行，任意字符位置均可断行（包含英文单词）8.backface-visibility解析：用于控制元素背面是否可见，3D翻转常用。9.背景裁剪至文本区域，仅文字区域显示背景解析：常配合文字渐变、文字镂空效果使用。10.ease解析：ease为先快后慢，是transition默认速度曲线。四、简答题参考答案1.opacity和rgba透明效果的核心区别①作用范围不同：opacity是元素整体透明，会让元素的背景、文字、子元素全部透明；rgba仅针对颜色生效，只让设置的背景色、文字色透明，不会影响子元素。②继承性不同：opacity的透明效果会被子元素继承，无法单独取消；rgba无继承性，仅作用于当前属性。③适用场景不同：opacity适合整体遮罩、弹窗透明；rgba适合局部颜色透明效果。2.content-box与border-box的区别①content-box（标准盒模型，默认值）：元素设置的width/height仅代表内容区尺寸，内边距padding、边框border会额外撑大元素整体尺寸。②border-box（怪异盒模型）：元素设置的width/height包含内容区、内边距、边框，修改padding和border不会改变元素整体尺寸，布局更稳定，是开发常用属性。3.transition和animation的区别与适用场景①触发方式：transition需要鼠标悬浮、点击等事件触发；animation可页面加载自动执行，无需事件触发。②动画复杂度：transition仅能实现简单的属性过渡，无关键帧；animation支持多关键帧，可实现复杂、多阶段动画。③播放次数：transition单次触发单次执行；animation可设置循环播放、往返播放。④适用场景：transition适合hover、切换等简单交互过渡；animation适合loading、轮播、动态特效等复杂持续动画。五、实操应用题参考答案1.方块特效完整CSS代码PlainText

.box{

width:200px;

height:200px;

border-radius:10px;/*圆角*/

box-shadow:0010px#999;/*灰色外阴影*/

background-color:rgba(0,0,0,0.6);/*半透明黑色背景*/

transition:all0.3sease;/*全局0.3秒过渡*/

}

.box:hover{

transform:scale(1.1);/*悬浮放大1.1倍*/

}2.Flex横竖居中布局代码PlainText

.container