伴随着大量让人欣喜的功能加入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；}}

本文完~