本章小结
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共同开发)