HTML5--------------------------CSS3的屬性應用與實例----------------------

 

1屬性選擇器；

 

 

 

 

 

2僞類選擇器：

 

 

 

 

 

3僞元素選擇器：

 

 

 

 

進度條

<progress></progress>

 

4文本陰影

   text-shadow: 2px 2px 8px #000;

   none： 無陰影

   第1個長度值用來設置對象的陰影水平偏移值。能夠爲負值

   第2個長度值用來設置對象的陰影垂直偏移值。能夠爲負值

   第3個長度值則用來設置對象的陰影模糊值。不容許負值

   設置對象的陰影的顏色。

 

5文本換行

   word-wrap: normal;

   默認處理方式

   white-space: pre;

   不合並文字間的空白距離，當文字超出邊界時不換行

     white-space: pre-wrap;

   不合並文字間的空白距離，當文字碰到邊界時發生換行

   white-space: pre-line;

   保持文本的換行（代碼中的換行符），不保留文字間的空白距離，當文字碰到邊界時發生換行

   white-space: nowrap;

   強制在同一行內顯示全部文本

 

6文本溢出：

   一行溢出

   text-overflow: ellipsis;

   white-space: nowrap;

   overflow: hidden;

   將超出盒子的文本切掉

   超出文章的文本以...顯示

   一行文本溢出 須要同時擁有三個屬性

  多行溢出

   overflow: hidden;

   display: -webkit-box;

   控制顯示幾行文本 後面加···

   -webkit-line-clamp: 4;

   -webkit-box-orient: vertical;

   

7邊框陰影

   box-shadow: -2px -2px 5px #000;

   水平偏移量 正值向右 負值向左 垂直正值向下 負值向上

   box-shadow: inset 20px 20px 0px -10px green,

                        inset 20px 20px 20px -10px #000,

                        20px 20px 10px red,

                        20px 20px 10px blue;

   多個內外陰影

 

8  漸變--線性

   background-image: linear-gradient(0deg, yellow, green);

   用角度肯定方向

   background-image: linear-gradient(to top, yellow, green);

   用關鍵字來肯定方向

   background-image: linear-gradient(to left, yellow 20%, green 40%, blue 80%);

   控制漸變

9漸變--徑向

   

 

 

10漸變--重複

   

 

   實例（立體按鈕、球體、滾動條）

  

 

 

  

 

11動畫應用