【CSS3】什麼是CSS3 及常用操作說明 --學習筆記更新中

CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。

以下大部分爲 在慕課網學習的筆記。

在使用過程中我們經常看到 一些加了短線的屬性，在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成爲W3C標準的一部分，是瀏覽器的私有屬性。

1.圓角效果border-redius

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ 

2.邊框陰影box-shadow

box-shadow: X軸偏移量  Y軸偏移量 	 [陰影模糊半徑]  [陰影擴展半徑]  [陰影顏色]  [投影方式];

X軸偏移量	必須 水平陰影的位置 允許負值
Y軸偏移量	必須 垂直陰影的位置 允許負值
陰影模糊半徑	可選 模糊距離
陰影擴展半徑	可選 陰影的尺寸
陰影顏色	可選 陰影的顏色 省略時默認黑色
投影方式	可選 設置 inset時爲內部陰影方式 省略時爲外陰影方式

注：給一個class添加不同陰影時可用“,”隔開 box-shadow:4px 4px 6px #666,-4px -4px 6px red,0 0 16px 6px green inset;

各陰影屬性的區別
（1）陰影模糊半徑與陰影擴展半徑的區別

陰影模糊半徑：此參數可選，其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴展半徑：此參數可選，其值可以是正負值，如果值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；

（2）X軸偏移量和Y軸偏移量值可以設置爲負數

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

X軸偏移量爲負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666;
}

Y軸偏移量爲負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666;
}

效果圖：

3.爲邊框應用圖片 border-image

background:url(xx.jpg) 10px 20px no-repeat;

4.漸變色彩 linear-gradient(方向，顏色)
參數：

方向	作用
0deg/to top	從下向上
90deg/top right	從左向右
180deg/to bottom	從上向下
270deg/to left	從右向左
/to top left	右下角到左上角
/to top right	左下角到右上角

注：
方向參數有兩種 角度或者英文表示 （角度/英文）

第一個參數省略時，默認爲“180deg”，等同於“to bottom”。第二個和第三個參數，表示顏色的起始點和結束點，可以有多個顏色值。

eg:

 background-image:linear-gradient(to top left,red,yellow,blue);

效果：

5.超出範圍text-overflow
語法：

text-overflow:clip | ellipsis;
overflow:hidden;
white-space:nawrap;

注：
clip：表示剪切
ellipsis：表示顯示省略標記

text-overflow只是用來說明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。

6.文字行爲是否換行 word-wrap
語法：
word-wrap:normal |break-word

注：
normal ：表示控制連續文本換行（瀏覽器默認值）
break-word：表示內容將在邊界內換行（設置長單詞或者url內部進行換行 此屬性不常用）

7.文本陰影text-shadow
語法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；

Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；

Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置爲0；

Color：是指陰影的顏色，其可以使用rgba色。

7.背景

• （1） background-size
  設置背景圖片的大小
  語法：

  background-size: auto | <長度值> | <百分比> | cover | contain

取值說明：

1. auto：默認值，不改變背景圖片的原始高度和寬度；
2. <長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其作爲圖片寬度值來等比縮放；
3. <百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4. cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；
5. contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止（左起）。

• （2）background-origin
  設置元素背景圖片的原始起始位置。
  語法：
  background-origin ： border-box | padding-box | content-box;
  參數分別表示背景圖片是從邊框，還是內邊距（默認值），或者是內容區域開始顯示。
  
• （3）background-clip
  用來將背景圖片做適當的裁剪以適應實際需要。
  語法：
  background-clip ： border-box | padding-box | content-box | no-clip
  參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip默認值爲border-box。
  

<更新中……>