~米漿牛奶~

Border Radius邊距圓潤度

border-radius:左上 右上 右下 左下;

border-top-left-radius

border-top-right-radius

border-bottom-right-radius
border-bottom-left-radius

border-radius參考網址:http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Box Shadow區塊陰影

box-shadow:x座標陰影 y座標陰影 模糊強度 擴張強度 顏色; 

Text Shadow文字陰影

text shadow: x座標陰影 y座標陰影 模糊強度 顏色;

Box Sizing區塊大小

box sizing:內容包含其他邊距;

box-sizing設定

content-box:內容區塊

padding-box:留白區塊

border-box:邊距區塊 

以下設定padding-box範例

.box{

  box-sizing:padding-box;

  border:2px solid black;

  margin:20px;

  width:300px;

}

所佔用共300+4(上下border)=304px高度(不包含margin)

Multiple background多種背景圖

以下為Multiple background範例

.element{

  background-image:url(bg1.jpg),url(bg2.jpg);

  background-position:left top,right center;

  background-repeat:no-repeat,no-repeat;

}

也可以寫成

.element{

  background:

    url(bg1.jpg) left top no-repeat;

    url(bg2.jpg) right center no-repeat;

}

Color顏色

以下為Color範例

.element{

  color:rgba(0,0,0,0.75);

}

rgba(紅,綠,藍,透明度);

hsla(角度,飽和度,亮度,透明度);  <<以圓形調色盤

Opacity透明度

以下為Opacity範例

.element{

  opacity:0.45;

} 

Gradients背景漸層色

分成兩種

Linear gradients 線性漸層

Radial gradients  放射漸層

以下為線性漸層格式

background: linear-gradient (角度,顏色1擴張(單位%),顏色2...)

background: linear-gradient (to 水平位置(left,right) 垂直位置(top,bottom),顏色1擴張(單位%),顏色2...)

還有範例

background:linear-gradient(180deg, red 20%, blue 30%);

background:linear-gradient(to right bottom, red , blue);

以下為放射漸層格式

background: radial-gradient (形狀(circle,預設ellipsis) 大小 at 位置,顏色1 擴張(單位%),顏色2...)

大小有四種

closest-side接近端

closest-corner接近角

farthest-side遠離端

預設farthest-corner遠離角

位置有兩種

水平(單位%或單字) 垂直(單位%或單字)

預設center

還有範例

background: radial-gradient(circle closest-corner at 20% 30%, red 10%, yellow, green);

Gradients參考網址:http://www.w3schools.com/Css/css3_gradients.asp

Font Face

以下為Font Face範例

@font-face{

  font-family:'NewGoodWord';

  src:url('myFont.eot');

} 

Transforms

以下為Transforms範例

.element{

  transform:translate(20px,30px);

}

transform分成四種

translate(X,Y):2D移動，也可單獨設如translateX、translateY

rotate(角度(單位deg)):旋轉

scale(X,Y):放大或縮小，也可單獨設如scaleX、scaleY

skewX(角度(單位deg))、skewY(角度(單位deg)):歪斜角度

Transitions

transition格式

transition:屬性 秒數(單位s) 時間動作 延遲(單位s)

時間動作分為

ease

ease-in

ease-in-out

linear

cubic-bezier

step-start

step-end

steps()

時間動作參考網址: http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp