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

时间:2021-09-14 23:39:26

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共同开发)