伴随着大量让人欣喜的功能加入HTML5，CSS3也同样为我们带来了更加绚丽的样式效果。
而CSS3面试题主要考察的仍然是那些已经应用在项目中的样式属性，以及应用过程中的一些常见问题，这些知识点是我们要多加关注的地方。
今天我们为大家准备了33道比较基础的CSS3面试题，也便于大家对CSS3有一个大概印象。
1、CSS3有哪些新特性？
CSS3的新特征如下：
圆角（ border- radius）；
阴影（box- shadow）；
对文字加特效（text- shadow）；
线性渐变（ gradient）；
变换（ transform ） 如（ transform:rotate（9deg）scale（0.85,0.90）translate（0px, 30px）skew（-9deg,0deg）；// 旋转、缩放、定位、倾斜。
更多的CSS选择器；
多背景设置；
色彩模式，如rgba；
伪元素::selection;
媒体查询；
多栏布局；
图片边框（ border-image）。
2、CSS3新增伪类有哪些？
新增伪类有以下几个：
p:first- of-type，选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type，选择属于其父元素的最后一个<p>元素的每个<p>元素。
p:only- of-type，选择属于其父元素的唯一<p>元素的每个<p>元素。
p:only- child，选择属于其父元素的唯一子元素的每个<p>元素。
p:nth- child（2），选择属于其父元素的第二个子元素的每个<p>元素。
:enabled:disabled，控制表单控件的禁用状态.
:checked，单选框或复选框被选中。
3、first-child与first-of-type的区别是什么？
二者的区别如下：
first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。
first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。
下面给出一段示例代码。
<div>
<p></p>
<span></span>
</div>
p:first-child匹配到p元素，因为p元素是div的第一个子元素。
span:first-child匹配不到span元素，因为span是div的第二个子元素。
p:first-of-type匹配到p元素，因为p是div所有为p的子元素中的第一个。
span:first-of-type匹配到span元素，因为span是div所有为span的子元素中的第一个。
4、当使用 transform:translate属性时会出现闪烁现象，如何解决？
解决方案如下。
-webkit-backface-visibility:hidden;
//隐藏转换的元素的背面
webkit-transform-style:preserve-3d；
//使被转换的元素的子元素保留其3D转换
webkit-transtorm:translate3d（0,0,0）；
//开启GPU硬件加速模式，使用GPU代替CPU渲染动画
注意：在某些 Android系统中，有时会有莫名其妙的Bug，建议慎重使用。
5、CSS3动画如何在动作结束时保持该状态不变？
采用 animation- fill-mode。其可以设置为以下值。
none，不改变默认行为。
forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both，向前和向后填充模式都可以应用。
6、用两种方式实现某DⅣ元素以每秒50px的速度左移100X。
方法一，使用 jQuery
$('div‘).animate({'left':100},2000）;
方法二，使用 JavaScript+CSS3
CSS部分如下。
div{
transition:all 2s linear；
// linear 规定以相同速度（匀速）开始至结束的过渡效果
}
JavaScript部分如下：
div .style.left =（div. offsetLeft + 100）+'px'；
7、介绍一下box- SIZIng属性。
box-sizing属性主要用来控制元素盒模型的解析模式。默认值是 content-box。
content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+ padding+content的宽度/高度决定，设置 width/height属性指的是指定 content部分的宽度/高度。
border-box让元素维持IE传统盒模型（IE6以下版本和IE6、IE7的怪异模式）。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。
标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
8、你对 content-box盒模型了解多少？
布局所占宽度（ Width）如下：
Width =width + padding-left + padding-right+ border-left + border-right
布局所占高度（ Height）如下：
Height= height + padding-top + padding-botton + border-top + border-bottom
9、你对 padding-box盒模型了解多少？
布局所占宽度（Width）如下：
Width= width（包含 padding-left+ padding-right)+ border-top+ border-bottom
布局所占高度（ Height）如下：
Height= height（包含 padding-top+ padding-bottom)+ border-top +border-bottom
10、你对 border.-box盒模型了解多少？
布局所占宽度（ Width）如下：
Width= width（包含 padding-left + padding-right +border-left+ border-right)
布局所占高度（ Height）如下：
Height= height（包含 padding-top+ padding-bottom+ border-top +border-bottom）
11、CSS3动画的优点是什么？
优点如下:
（1）在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化。
（2）代码相对简单。
12、CSS3动画的缺点是什么？
缺点如下:
（1）在动画控制上不够灵活
（2）兼容性不好。
（3）部分动画功能无法实现
13、Animation与 Transition的异同是什么？
Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。
Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
14、Animation属性值有哪些？
两个必要属性如下。
animation-name，即动画名称。
animation- duration，即动画持续时间。
其他属性值如下。
animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。
animation- timing- function，即动画运动形式。
animation- delay，即动画延迟时间。
mation-iteration- count，即重复次数。
animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。
15、媒体查询的使用方法是什么？
使用方法如下：
@media媒体类型and（媒体特性）{样式规则}
这通常在移动端使用。在做移动端开发的时候，为了适配多屏幕，使用rem单位，然后根据屏幕尺寸的改变动态地设置根节点HIML的font-size值。这样可以解决多屏幕适配的问题。
html{
font-size：20px;
}
@media （min-width：320px） {
html
{
font-size：12px；
}
}
@media （min-width：360px）{
html{
font-size：16px；
}
}
但是这种做法有两个缺点。
（1）适配屏幕的尺寸不是连续的。
（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。
16、rem的原理是什么？
在做响应式布局的时候，通过调整HTML的字体大小，页面上所有使用rem单位的元素都会做相应的调整。
17、如何设置CSS3文本阴影？
h1{text- shadow：水平阴影，垂直阴影，模糊距离，阴影颜色}
18、如何把元素从左侧移动50像素，从顶端移动100像素？
具体代码如下：
div{
transform:translate（50px,100px）；
-ms-transform:translate（50px, 100px）；/*IE9*/
-webkit-trans form:translate（50px, 100px）； /*Safari 和 Chrome */
-o-trans form:translate（50px, 100px）；/*opera*/
-moz-transform:translate（50px, 100px）；/* Firefox */
19、如何把一个元素旋转30°？
具体代码如下。
div{
transform:rotate（30deg）；
-ms-transfornm:rotate （30deg）；/*IE9*/
-webkit-transform:rotate（30deg）；/* Safar1和 Chrome*/
-o-transform:rotate（30deg）；/* opera*/
-moz-transform:rotate（30deg）；/*Firefox*/
20、如何使用matx0将di元素旋转30°？
具体代码如下。
div{
transform:matrix（0.866,0.5，-0.5,0.866,0,0）；
-ms-transform:matrix(0.866,0,5=0,5,0,866,0,0); /*IE9*/
-moz-trans form:matrix(0. 866,0.5，-05,0.866,0,0); /*Firefox */
-o-transform:matrix(0.866,0.5，-0,5,0.866,0,0); /*Opera*/
21、如何利用CSS3制作淡入淡出的动画效果？
具体步骤如下
（1）定义动画关键帧，名称为 fadeIn
@-webkit-keyframes fadeIn {
from {
opacity：0；/*初始状态，透明度为0*/
}
to { opacity：1；/*结尾状态，透明度为1*/
}
}
@-webkit-keyframes fadeout {
from { opacity：1；/*初始状态，透明度为1*/
}
to{
opacity：0；/*结尾状态，透明度为0*/
}
}
（2）为div增加如下动画代码。
div{
-webkit- animation-name:fadeIn；/*动画名称*/
- webkit- animation-duration：3s；/*动画持续时间*/
- webkit- animation-iteration- count：1；/*动画次数*/
- webkit- animation- delay：0s；/*延迟时间*/
22、说一说盒阴影。
盒阴影的语法结构与文本阴影类似，如box- shadow：5px 5px 5px rgba（255，15，255，0.5）。
但是，盒阴影多了一个属性，即外延值 inset.，如box- -shadow：5px 5px 25px rgba（0,0,255，0.5）inset。
23、如何为盒子添加蒙版？
代码如下。
demo {
height：144px ；
width：144px；
background:url（logo.png）；
-webkit-mask-image:url（shadow.png）；
-webkit-mask-position：50% 50%；
-webkit-mask-repeat:no-repeat；
蒙版复合属性的语法是- webkit-mask:url（ pro_pho_show_pic.png）50% 50% no- repeat。
蒙版相关属性如下。
-webkit-mask-clip，即蒙版裁剪位置。
-webkit-mask- origin，即蒙版原点位置。
24、如何通过CSS3实现背景颜色线性渐变？
具体代码如下：
div{
background：-webkit-linear-gradient （left, red, green 50%， blue）；
}
25、如何实现CSS3倒影？
通过-webkit-box-reflect设置方向、距离。
方向可以设置为 below、 above、left、 right。
下面给出一段示例代码
.demo {
height：144px；
width：144px；
background:url （logo. png）；
-webkit-box-reflect:below 10px；
}
26、当元素不面向屏幕时其可见性如何定义？
使用 backface-visibility:visible | hidden。
27、CSS3中 transition属性值及含义是什么？
transition属性是一个简写属性，用于设置以下4个过渡属性。
transition- property，哪个属性需要实现过渡
transition- duration，完成过渡效果需要多少秒/毫秒
transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。
transition- delay，规定过渡开始前的延迟时间。
28、如何相对于内容框定义图像？
具体代码如下。
.demo{
height：200px；
width：200px；
padding：50px；
border: 1px solid #ccc；
background-image: url（'logo. png'）；
background-repeat: no-repeat；
background-position: left top；
background-origin: content-box;}
语法为 background- origin:padding- box | border- box |content-box。
29、background-clip和 background- origin的区别是什么？
background-clip规定背景（包括背景颜色和背景图片）的绘制区域它有3种属性，分别是 border-box、 padding-box、 content-box。
border-box，即背景从边框开始绘制。
padding-box，即背景在边框内部绘制。
content-box，即背景从内容部分绘制。
background- origin，规定背景图片的定位区域。
它也有3种属性：border-box, padding-box, content--box。但要注意，它描述的是“背景图片”。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。
30、为了把文本分隔为4列并使两列之间间隔30像素，应该如何实现？
具体代码如下：
div{
-moz-column-count：3；
/* Firefox /-webkit-column-count：3；
/* Safari和 Chrome*/
column-count：3；
-moz-column-gap：40px；
/*Firefox*/
-webkit- column-gap：40px；
/* Safar1和 Chrome*/
column-gap：40px；
width：600px；
31、如何用省略号显示超出文本的内容？
使用text-overflow:ellopsis。
当文本溢出时，为了不显示省略标记（…），通过clip直接将溢出的部分裁剪掉。
32、如何实现文本换行？
使用word-wrap属性。
normal，只在允许的断字点换行（浏览器保持默认处理）。
break-word，在长单词或URL地址内部进行换行。
33、说明如何用@ keyframes使dv元素移动200像素。
具体代码如下：
div{
width：100px；
height：50px；
background:#f30；
animation:move 3s；
}
@keyframes move{
from{
margin-left:0px；
}
to {
margin-left:200px；
}}
本文完~
2516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
