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移動,也可單獨設如translateXtranslateY

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

scale(X,Y):放大或縮小,也可單獨設如scaleXscaleY

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

arrow
arrow
    全站熱搜

    o迷苓o 發表在 痞客邦 留言(0) 人氣()