IT兄弟連 HTML5教程 CSS3屬性特效 小結及習題

  • 2019 年 12 月 10 日
  • 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103403058

本章小結

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共同開發)

Tags:

VirMach 便宜 VPS