IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

本章小结

CSS3新增了许多属性，CSS3样式新增了一种颜色模式rgba用来制作透明色，比CSS的颜色模式多了一个透明度的设置。文字的CSS3特效有文字阴影、文字描边、文字排版和文字省略等。另外，CSS3增加了弹性盒模型，我们可以为盒模型增加阴影和倒影。CSS3的分栏布局让WEB开发人员轻松的让文本呈现多列显示。传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，仅需要通过设置border-radius属性即可。通过CSS3，我们能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。CSS3 Gradient分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。CSS3规范中对背景这一部分，新加入设定多个背景图片、指定背景大小、设置背景渐变等功能。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。transition允许CSS的属性值在一定的时间区间内平滑地过渡。2D变换和3D变换能够对元素进行移动、缩放、转动、拉长或拉伸。制作动画需要使用animation属性，执行动作需要由关键帧@keyframes来控制。

本章习题

1．在CSS中，注释代码是（B）

A.<!-->                                                                                                      B./**/

C.//                                                                                                              D.||

2．要实现溢出文本显示省略号效果，需要增加怎样的样式？（C）

A．text-overflow:ellipsis;

B．text-overflow:ellipsis; white-space:nowrap;

C．text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

D．white-space:nowrap; overflow:hidden;

3．以下哪段代码不能将宽、高都为200px的div设置为圆角？（D）

A．div{ border: 1px solid #000; border-radius: 100px; }

B．div{ border: 1px solid #000; border-radius: 100px 100px; }

C．div{ border: 1px solid #000; border-radius: 50%; }

D．div{ border: 1px solid #000; border-radius: 100%; }

4．下面哪段代码不能实现颜色从顶部向底部渐变？（C）

A．background-image: -webkit-linear-gradient(white,black);

B．background-image: -webkit-linear-gradient(top,white,black);

C．background-image: -webkit-linear-gradient(90deg,white,black);

D．background-image: -webkit-linear-gradient(-90deg,white,black);

5．下列属性哪一个能够实现层的隐藏？（C）

A．display:false                                                                                   B．display:hidden

C．display:none                                                                                  D．display:" "

6．background-orgin属性可以设置图像的基准位置，它的取值不包括以下哪项？（B）

A．padding-box                                                                                  B．margin-box

C．border-box                                                                                     D．content-box

7．background-clip控制整个元素背景的显示范围，以下哪项取值是将背景裁剪到内边距框？（B）

A．border-box                                                                                     B．padding-box

C．content-box                                                                                    D．no-clip

8．transition属性是一个简写属性，用于设置四个过渡属性，以下哪个过渡属性是设置过渡效果的时间？（B）

A．transition-property                                                                        B．transition-duration

C．transition-timing-function                                                           D．transition-delay

9．以下哪个方法可以使元素旋转？（B）

A．translate()                                                                                       B．rotate()

C．scale()                                                                                             D．skew()

10．用旋转命令“rotate”旋转对象时（A）

A．必须指定旋转角度                                                    B．必须指定旋转基点

C．必须使用参考方式                                                  D．可以在三维空间缩放对象

11．浏览器的内核分别是什么?

答案：

IE：trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)