css3 一些屬性

標籤：style   blog   http   color   使用   os   io   strong   

==text-shadow==

文法：text-shadow: x-offset y-offset blur-radius color

text-shadow:X 軸位移量 Y軸位移量 模糊半徑 陰影顏色

相容性，相容標準瀏覽器， ie你懂的

=參數說明=

X 軸位移量：是指陰影水平位移量，其值可以是正負值，如果值為正值，剛陰影在對象右邊，反之其為負值，陰影在對象的左邊；

Y 軸位移量：是指陰影的垂直位移量，其值也可以是正負值，如果值為正值，則陰影在對象底部，反之為其負值，陰影在對象頂部；

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

陰影顏色：此參數是可選的，如果不設定任何顏色時，瀏覽器會取預設色值的，各瀏覽器不一樣，特別是在webkit核心下的safari和chrome 瀏覽器解析為無色，也就是所謂的透明，所以還是別圖省事喲，

=實際應用=

//css.t-shadow{    text-shadow:2px 2px 3px red;}.t-shadow2{    text-shadow:3px 2px 0px red;}//html<div class="t-shadow">    文本陰影</div><div class="t-shadow2">    文本陰影</div>

 

==box-shadow==

文法：box-shadow : inset x-offset y-offset blur-radius spread-redius color

box-shadow: 陰影類型 X軸位移量 Y軸位移量 模糊半徑 擴充半徑 顏色

相容性  ie9 及以上標準瀏覽器

=參數說明=

陰影類型：此參數是一個可選的，如果不設值，其預設投影方式是外陰影，如果取其唯一值inset，其投影方式為內陰影

x-offset： 陰影水平位移量，其值可以是正負值，如果為正值，則陰影在對象右邊，反之其值為負值時，陰影在對象左邊；

y-offset：是指陰影的垂直位移量，其值可是正負值，如果為正值，則陰影在對象底部，反之其值為負值時，陰影在對象頂部；

陰影模糊半徑：此參數也是可選的，其值只能為正負值，如果為0時，不具備陰影製作效果，其值越大，陰影模糊半徑越大；

陰影擴充半徑：也是可選的，值也可以正負值，如果值為正，則整個陰影都延展擴大，反之則為負值，陰影縮小的

陰影顏色：可選，如果不設定，瀏覽器也是取預設的，有的還為透明，跟text-shadow 是一樣的， 盡量不要圖省事呀，得寫個值喲

=實際應用=

//css//第三個數值代表陰影模糊半徑，如果省略就沒有模糊效果，擴充半徑預設就是有的.b-shadow{    width: 200px;    height: 200px;    border: 1px solid #ccc;    margin-left: 50px;    -webkit-box-shadow:2px 2px 3px red;    -moz-box-shadow:2px 2px 3px red;    box-shadow:2px 2px 3px red;}//當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層.b-shadow{    width: 200px;    height: 200px;    border: 1px solid #ccc;    margin-left: 50px;    -webkit-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;    -moz-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;    box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;}//html <div class="b-shadow">    盒陰影</div>

//如果前面的陰影模糊值小於後面的陰影模糊值，那麼前面的顯示在後面之上，如果前面陰影的模糊值大於後面的陰影模糊值，那麼前面的陰影將遮住後面的陰影製作效果。.b-shadow{    width: 200px;    height: 200px;    border: 1px solid #ccc;    margin-left: 50px;    /*box-shadow: 0 0 5px red,0 0 15px blue;*/    box-shadow: 0 0 15px red,0 0 5px blue;}

//四邊具有相同的陰影製作效果（只設定陰影模糊半徑和陰影顏色）.b-shadow{        box-shadow:0 0 5px red;}

//四邊具有相同的陰影（只設定陰影擴充半徑和陰影顏色）.b-shadow{     box-shadow:0 0 0 1px red;}

//內陰影inset效果，但是img標籤上直接應用box-shadow的inset是沒有任何效果的.b-shadow{    box-shadow: inset 0 0 10px red;}

img {box-shadow: inset 0 0 10px red;}// 不要這樣做

//讓圖片img實現內陰影的方法，我們把img放到一個div中，然後不直接在img上運用box-shadow屬性，而是在img的父元素div上運用box-shadow，接著我們在給img進行相對定位，並讓其在父元素下一層.b-shadow{    /*width: 200px;    height: 200px;*/    /*border: 1px solid #ccc;*/    margin-left: 50px;    -webkit-box-shadow: inset 0 0 10px blue;    -moz-box-shadow: inset 0 0 10px blue;    box-shadow: inset 0 0 10px blue;    display: inline-block;}.b-shadow img{    position:relative; z-index:-1;    display: block;}

//讓圖片img實現內陰影的方法，我們換過一種實現方法，這種方法我們是在img父元素上應用虛擬元素“:before”來實現.b-shadow{    position: relative;    display: inline-block;    *display: inline;}.b-shadow:before{    content:"";    position: absolute;    width: 100%;    height: 100%;    -moz-box-shadow:inset 0 0 5px 1px blue;    -webkit-box-shadow: inset 0 0 5px 1px blue;    box-shadow: inset 0 0 5px 1px blue; } .b-shadow img {     display: block; }

//給body頂部增加一個陰影body:before {     content:"";      position:fixed;     top: 10px;     left: 0;     width: 100%;     height: 10px;     z-index: 999;      box-shadow: 0 0 10px red;}

//Drop-shadow效果.b-shadow{            width: 300px;            height: 150px;            position: relative;            background: #ccc;        }        .b-shadow:before,.b-shadow:after {            content: "";            position: absolute;            z-index: -1;            bottom: 15px;            left: 10px;            width: 50%;            height: 20%;            /*add box-shadow*/             -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);             -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);             box-shadow: 0 15px 10px rgba(125,125,125,0.8);             /*add css3 transform*/            -webkit-transform: rotate(-3deg);            -moz-transform: rotate(-3deg);            -o-transform: rotate(-3deg);            transform: rotate(-3deg);        }        .b-shadow:after {            right:10px;            left: auto;            -webkit-transform:rotate(3deg);            -moz-transform:rotate(3deg);            -o-transform:rotate(3deg);            transform:rotate(3deg);        }

==transform==

文法：transform：rotate(旋轉) || translate(移動) || scale(縮放) || skew(扭曲) || matrix(矩陣)

相容性：ie9 及以上

transform 的意思是變形，改變的意思， 在css3 中transform 主要包換一下屬性：旋轉 rotate、移動translate、綻放scale、扭曲skew 以及矩陣變形matrix

如果同時對一個元素進行transform多個屬性 如 rotate, translate scale, 三種，多個屬性之間用空格隔開，空格喲，親，transform實現了一些可以用svg實現的同樣功能，他可用於行元素和塊元素

一、旋轉rotate

rotate(<angle>) ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。如：transform:rotate(30deg)

二、移動translate

移動translate分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法如下：

1、translate(tx,ty) 表示對象按照設定的x,y參數值進行平移，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項，如果ty未被提供，則ty以 0 作為其值。當值為負數時，反方向移動物體，其基點預設為元素 中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px)

2、translateX(tx) ： 通過給定一個X方向上的值指定一個translation。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據transform-origin改變基點位置。如：transform:translateX(100px)

3、translateY(ty) ：通過給定一個Y方向上的值指定一個translation。只向Y軸進行移動，基點在元素中心點，也可以通過transform-origin改變基點位置。如：transform:translateY(20px)

三、縮放scale

縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮 放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中 心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。

1、scale(<number>[, <number>])：提供執行[sx,sy]縮放向量的兩個參數指定一個2D scale（2D 縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設定，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個選擇性參數，如果沒有設定Y值，則表示 X，Y兩個方向的縮放倍數是一樣的，並以X為準。如：transform:scale(2,1.5)

2、scaleX(<number>) ： 使用 [sx,1] 縮放向量執行縮放操作，sx為所需參數。scaleX表示元素只在X軸(水平方向)縮放元素，他的預設值是(1)，其基點一樣是在元素的中心位置，我 們同樣是通過transform-origin來改變元素的基點。如：transform:scaleX(2)

3、scaleY(<number>) ： 使用 [1,sy] 縮放向量執行縮放操作，sy為所需參數。scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點同樣是在元素中心位置，可以通過transform- origin來改變元素的基點。如transform:scaleY(2)

四、扭曲skew

扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值 進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

1、skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜 切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一 個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是選擇性參數，如果沒有設定第二個參數，那麼Y軸為0deg。同樣是以元素中心為 基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg)

2、skewX(<angle>) ： 按給定的角度沿X軸指定一個skew transformation（斜切變換）。skewX是使元素以其中心為基點，並在水平方向（X軸）進行扭曲變行，同樣可以通過transform-origin來改變元素的基點。如：transform:skewX(30deg)

3、skewY(<angle>) ： 按給定的角度沿Y軸指定一個skew transformation（斜切變換）。skewY是用來設定元素以其中心為基點並按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過transform-origin來改變元素的基點。如：transform:skewY（10deg）

五、矩陣matrix

transform: matrix(a,b,c,d,e,f);
實際上transform: matrix(1, 0, 0, 1, 30, 30);就等同於transform: translate(30px, 30px);. 注意：translate,rotate等方法都是需要單位的，而matrix方法e, f參數的單位可以省略。

瞭解更多http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

六、另外我們需要理解改變元素基點transform-origin

transform-origin  它的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置，因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。但有時候我們需要在不同的位置對元素進行這些操作，那麼我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。

transform-origin(X,Y):用來設定元素的運動的基點（參照點）。預設點是元素的中心點。其中X和Y的值可以是百分值,em,px，其 中X也可以是字元參數值left,center,right；Y和X一樣除了百分值外還可以設定字元值top,center,bottom，這個看上去有 點像我們background-position設定一樣。其中 left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值，表示垂直方向值不變。

transform-origin:(left,top); transform-origin:right; transform-origin(25%,75%);

這裡還要提醒大家一點的是，transform-origin並不是transform中的屬性，他具有自己的文法，transform-origin跟其他的css3屬性一樣，我們需要在不同的瀏覽核心中加上相應的首碼，下面列出各種瀏覽器核心下的文法規則：

 

transform -origin在不同瀏覽器核心下的書寫規則//Mozilla核心瀏覽器：firefox3.5+  -moz-transform-origin: x y;  //Webkit核心瀏覽器：Safari and Chrome  -webkit-transform-origin: x y;  //Opera  -o-transform-origin: x y ;  //IE9  -ms-transform-origin: x y;  //W3C標準transform-origin: x y ; transform在不同瀏覽器核心下的書寫規則//Mozilla核心瀏覽器：firefox3.5+  -moz-transform: rotate | scale | skew | translate ;  //Webkit核心瀏覽器：Safari and Chrome  -webkit-transform: rotate | scale | skew | translate ;  //Opera  -o-transform: rotate | scale | skew | translate ;  //IE9  -ms-transform: rotate | scale | skew | translate ;  //W3C標準transform: rotate | scale | skew | translate ;

==Transition==

 

==Animation==

待續----