【面试】前端面试之 CSS3 新特性

　　面试系列是收罗前端一系列常规,进阶,高级等的面试题。本次收罗的是css3新特性。话不多说直接开始。

　　

 

 　　

CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。

1. element1~element2: 选择前面有element1元素的每个element2元素。
2. [attribute^=value]: 选择某元素attribute属性是以value开头的。
3. [attribute$=value]: 选择某元素attribute属性是以value结尾的。
4. [attribute*=value]: 选择某元素attribute属性包含value字符串的。
5. E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
6. E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
7. E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
8. E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
9. E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
10. E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
11. E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
12. E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
13. E:last-child: 选择属于其父元素最后一个子元素每个E元素。
14. :root: 选择文档的根元素。
15. E:empty: 选择没有子元素的每个E元素（包括文本节点)。
16. E:target: 选择当前活动的E元素。
17. E:enabled: 选择每个启用的E元素。
18. E:disabled: 选择每个禁用的E元素。
19. E:checked: 选择每个被选中的E元素。
20. E:not(selector): 选择非selector元素的每个元素。
21. E::selection: 选择被用户选取的元素部分。

 

Transition,Transform和Animation

　　Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果，而不用使用Flash动画或JavaScript。Transition有如下属性：

• transition-property: 规定应用过渡的CSS属性的名称。
• transition-duration: 规定完成过渡效果需要多长时间。
• transition-delay: 规定过渡效果何时开始，默认是0。
• transition-timing-function: 规定过渡效果的时间曲线，默认是”ease”，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
• transition: 简写属性，用于在一个属性中设置四个过渡属性。
  在一个例子中使用所有过渡属性如下：

• div {
      transition-property: width;
      transition-duration: 1s;
      transition-timing-function: linear;
      transition-delay: 2s;
      /* Firefox 4 */
      -moz-transition-property:width;
      -moz-transition-duration:1s;
      -moz-transition-timing-function:linear;
      -moz-transition-delay:2s;
      /* Safari 和 Chrome */
      -webkit-transition-property:width;
      -webkit-transition-duration:1s;
      -webkit-transition-timing-function:linear;
      -webkit-transition-delay:2s;
      /* Opera */
      -o-transition-property:width;
      -o-transition-duration:1s;
      -o-transition-timing-function:linear;
      -o-transition-delay:2s;
  }

  简练写法：

• div {
      transition: width 1s linear 2s;
      /* Firefox 4 */
      -moz-transition:width 1s linear 2s;
      /* Safari and Chrome */
      -webkit-transition:width 1s linear 2s;
      /* Opera */
      -o-transition:width 1s linear 2s;
  }

  一般简练的就可以了，加如是大型项目，流量大，用户多，可能多种浏览器都会用到，就需要写兼容css。

　　　Transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。使用方式如下

　　　　

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

transform可以有各种变换类型，即属性值：

• none: 定义不进行转换。
• matrix(n,n,n,n,n,n): 定义2D转换，使用六个值的矩阵。
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3D转换，使用16个值的4x4矩阵。
• translate(x,y): 定义2D位移转换。
• translate3d(x,y,z): 定义3D位移转换。
• translateX(x): 定义位移转换，只是用X轴的值。
• translateY(y): 定义位移转换，只是用Y轴的值。
• translateZ(z): 定义3D位移转换，只是用Z轴的值。
• scale(x,y): 定义2D缩放转换。
• scale3d(x,y,z): 定义3D缩放转换。
• scaleX(x): 通过设置X轴的值来定义缩放转换。
• scaleY(y): 通过设置Y轴的值来定义缩放转换。
• scaleZ(z): 通过设置Z轴的值来定义3D缩放转换。
• rotate(angle): 定义2D旋转，在参数中规定角度。
• rotate3d(x,y,z,angle): 定义3D旋转。
• rotateX(angle): 定义沿着X轴的3D旋转。
• rotateY(angle): 定义沿着Y轴的3D旋转。
• rotateZ(angle): 定义沿着Z轴的3D旋转。
• skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。
• skewX(angle): 定义沿着X轴的2D倾斜转换。
• skewY(angle): 定义沿着Y轴的2D倾斜转换。
• perspective(n): 为3D转换元素定义透视视图。

　　

浏览器是否支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

 

Animation

　　Animation让CSS拥有了可以制作动画的功能

　　animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

　　

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

　　具体示例可以参考  css3 Animation

边框

　　border-radius 圆角 

　　border-image 边框图片

　　box-shadow 阴影

背景

　　CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

文字效果

　　text-overflow 规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

　　word-wrap 强制文本换行

　　text-shadow 文本阴影，能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

　　　　h1{
　　　　　　text-shadow: 5px 5px 5px #FF0000;
　　　　}

　　text-decoration

　　　　CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

• text-fill-color: 设置文字内部填充颜色
• text-stroke-color: 设置文字边界填充颜色
• text-stroke-width: 设置文字边界宽度

渐变

　　linear-gradient(线性渐变)和radial-gradient(径向渐变)

background-image:linear-gradient(90deg,yellow 20%,green 80%)

background-iamge:radial-gradient(120px at center center,yellow,green)

多列布局

　　column-count  column-width column-gap column-rule

界面

　　CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。Firefox、Chrome以及Safari 支持resize属性。IE、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。所有主流浏览器都支持outline-offset属性，除了IE。

　　以上就是收罗的关于css3新特性面试题，面试官可能会问你了解多少，亦或者问你具体的某个详细的属性，都有可能，总之多多准备，有备无患。希望这篇文章可以帮到你，谢谢观看。