chapter summary
Many new CSS3 properties, CSS3 style adds a color mode rgba used to make transparent color, set more than a transparent color mode of CSS. CSS3 text shadow effects have text, text strokes, text layout and text and so on will be omitted. In addition, CSS3 increase the flexibility of the box model, we can add shadows and reflections to box model. CSS3 WEB sub-column layout allows developers to easily make multi-column display text rendering. Traditional fillet generation scheme, must be used more than one picture as a background pattern. CSS3 appears that we no longer have to waste time to make these pictures, and need only by setting the border-radius attribute. By CSS3, we can create rounded corners, add a shadow to a rectangle, use images to draw the border. CSS3 Gradient into linear-gradient (linear gradient) and a radial-gradient (radial gradient). CSS3 specification of the background of this section, a plurality of newly added set background image, specify the size of the background, background gradient functions is provided. To provide a mask based on the pixel level, the ability to control the elements of transparency, similar to the effect of alpha transparent passage png32 png24 bit or bits. CSS is an attribute value transition smoothly transitions within a certain time interval. 3D and 2D transform can be performed to transform the elements to move, scale, rotation, elongation or stretching. Animation requires the use of animation properties, perform actions need to be controlled by keyframes @keyframes.
Chapter exercises
1. In CSS, comment code (B)
A.<!--> B./**/
C.// D.||
2. To achieve the overflow text display ellipsis effect, the need to increase what kind of style? (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. Which of the following methods can rotate the elements? (B)
A．translate() B．rotate()
C．scale() D．skew()
10. With the rotation command "rotate" the object is rotated (A)
A. You must specify the angle of rotation B. You must specify the rotation point
C. Reference must be used the way D. You can scale an object in three-dimensional space
11. What browser kernel are?
answer:
IE: trident core
Firefox: gecko kernel
Safari: webkit kernel
Opera: former presto kernel, Opera now use Google Chrome's core Blink
Chrome: Blink (joint development based on webkit, Google and Opera Software)