CSS3體驗入門

CSS3在樣式上提供了非常豐富的選擇，目前由於瀏覽器的問題，部分新的樣式需要載入首碼才可以讓不同的瀏覽器識別

Firefox：-moz-

Chrome：-webkit-

Opera：-o-  這個這個太萌了

Safari：-webkit-

IE：-ms-

Border

先說下新的邊框樣式，新的邊框樣式提供了可定製的圓角，陰影和圖片邊框的控制。先看一個簡單的案例

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    border-top-left-radius: 10px 20px;    border-top-right-radius: 15px;    border-bottom-right-radius: 20px 10px;    border-bottom-left-radius: 30px 15px;}

上面的代碼描述了一個圓弧角的矩形，並且有陰影。圓弧角的值是x/y，x是水平半徑，y是垂直半徑，如果y不設定，那y=x。radius可以簡寫到一起

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px; }

來看下陰影

 div {     width: 100px;     height: 100px;     border-style: solid;     border-width: 15px 2px 5px 3px;     box-shadow: -3px 3px 2px 2px rgb(10,20,30); }

值的格式分別為：投影方式 X軸位移量 Y軸位移量 陰影模糊半徑 陰影擴充半徑 陰影顏色
xy值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊

投影方式預設是外陰影，如果要設定，必定是inset

div{    width: 100px;    height: 100px;    border: 12px solid blue;    background-color: Orange;    border-top-left-radius: 60px 90px;    border-bottom-right-radius: 60px 90px;    box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;}

然後是邊框圖片，這個有點不直觀

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    -webkit-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;    -moz-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;}

上面的代碼就是說，把圖片按上右下左的次序（15px 3px 5px 3px 但不要寫單位，預設就是px）切成9塊，四個尖角切出的不動，其他都按寬高展開變形。

變形的參數有stretch/round/repeat/space，可以設定x y，也可以設x，那x=y了。

Backgrounds

css2對北京圖片的處理是放置一個，平鋪，x和y方向，現在我們可以選擇新的背景圖片大小的方式

div{    width: 530px;    height: 330px;    background-image: url(http://www.witshare.org/css/images/mm_light.png);    background-size:cover;    background-repeat:no-repeat;}

使用size可以讓圖片適應元素的大小：cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又無法使用background-repeat來實現時，我們就可以採用cover;將背景圖片放大到適合容器的大小，
contain:此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這兩種方法都會使用圖片失真。

還可以定位背景的位置地區

div{    width: 100px;    height: 100px;    padding: 20px;    border: solid 30px red;    background-color: Lime;    background-image: url(http://www.witshare.org/css/images/mm_light.png);    background-repeat: no-repeat;    -moz-background-origin: padding;    -webkit-background-origin: padding;    -moz-background-origin: padding-box;    -webkit-background-origin: padding-box;    -o-background-origin: padding-box;    background-origin: padding-box;}

以上的特性可以多個圖片來源重疊，下面的案例描述了如何把三張牌疊放到一起的（為什麼我每次都用牌來做案例呢？）

div{    width: 300px;    height: 300px;    background-image: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);    background-repeat: no-repeat;    background-position: 0px 0px,3px 20px,6px 40px;    background-origin: content-box;}

Text

看看下demo

span{    text-shadow: 5px 5px 5px #FF0000;    word-wrap: break-word;    text-overflow: ellipsis;}

陰影的參數是  x軸  y軸  模糊度 顏色

換行就是一個：在邊界內換行

文本溢出的話有兩個值 clip：不顯示省略標記（...），而是簡單的裁切。ellipsis：當對象內文本溢出時顯示省略標記（...）

Font

以前我們盡量用標準字型，應為考慮到用戶端沒有安裝我們設計用的字型，現在css3開始支援線上字型了

以下應用了google的一個很漂亮的字型

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"><style>    span    {        font-family: 'Tangerine' , serif;        font-size: 48px;    }</style>

關於google更多的字型可以看下Google Web Fonts

Transforms

汽車人，變形出發。css3開始支援2D的變形啦

下面的代碼描述了如何順時針旋轉

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: rotate(15deg);    -ms-transform: rotate(15deg);    -webkit-transform: rotate(15deg);    -o-transform: rotate(15deg);    -moz-transform: rotate(15deg);}

下面是沿xy軸移動，可以通過translateX/y來個體設定

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: translate(10px,100px);    -ms-transform: translate(10px,100px);    -webkit-transform: translate(50px,100px);    -o-transform: translate(10px,100px);    -moz-transform: translate(10px,100px);}

縮放，縮放的值是倍數，以下代碼得到200*100的矩形，同樣可以通過scalex/y來各自細化值

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: scale(2,1);    -ms-transform: scale(2,1);    -webkit-transform: scale(2,1);    -o-transform: scale(2,1);    -moz-transform: scale(2,1);}

扭曲通過描述xy上的角度來變形，同樣可以xy細化

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: skew(10deg,20deg);    -ms-transform: skew(10deg,20deg);    -webkit-transform: skew(10deg,20deg);    -o-transform: skew(10deg,20deg);    -moz-transform: skew(10deg,20deg);}

矩陣變形，通過6個值完全重新置放元素

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);}

換變形中心點

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: rotate(45deg);    transform-origin: 20% 40%;    -ms-transform: rotate(45deg);    -ms-transform-origin: 20% 40%;    -webkit-transform: rotate(45deg);    -webkit-transform-origin: 20% 40%;    -moz-transform: rotate(45deg);    -moz-transform-origin: 20% 40%;    -o-transform: rotate(45deg);    -o-transform-origin: 20% 40%;}

也可以對一個變形動作給出時間和事件控制。

transition主要包含四個屬性值：執行變換的屬性：transition-property,變換延續的時間：transition-duration,在延續時間段，變換的速率變化transition-timing-function,變換延遲時間transition-delay。

值的變換速率有6個可能值
ease逐漸層慢  0.25, 0.1, 0.25, 1.0
linear  勻速 0.0, 0.0, 1.0, 1.0
ease-in  加速 0.42, 0, 1.0, 1.0
ease-out 減速 0, 0, 0.58, 1.0
ease-in-out 加速然後減速  0.42, 0, 0.58, 1.0
cubic-bezier

transition-delay是用來指定一個動畫開始執行的時間,意思是當改變元素屬性值後多長時間開始執行transition效果

下面是一個簡單的案例

div{    width: 100px;    height: 100px;    background-color: Orange;    transition: width 2s, height 2s;    -moz-transition: width 2s, height 2s, -moz-transform 2s;    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;    -o-transition: width 2s, height 2s, -o-transform 2s;}div:hover{    width: 200px;    height: 200px;    background-color:Blue;    transform: rotate(360deg);    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);}

以下的代碼描述了不同的加速情況

<!DOCTYPE html><html lang="zh-cn"><head>    <title></title>    <style>        box        {            border: 1px solid #ccc;            padding: 10px;            height: 400px;            width: 400px;        }        .transition-demo        {            width: 100px;            height: 100px;            border: 12px solid blue;            background-color: Orange;            border-top-left-radius: 60px 90px;            border-bottom-right-radius: 60px 90px;            box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;            text-align: center;            line-height: 50px;            text-align: center;            color: #fff;            margin-bottom: 10px;        }        #ease        {            -moz-transition: all 5s ease 0.3s;            -webkit-transition: all 5s ease 0.3s;            -o-transition: all 5s ease 0.3s;            transition: all 5s ease 0.3s;            background: #f36;        }        #ease-in        {            -moz-transition: all 3s ease-in 0.5s;            -webkit-transition: all 3s ease-in 0.5s;            -o-transition: all 3s ease-in 0.5s;            transition: all 3s ease-in 0.5s;            background: #369;        }        #ease-out        {            -moz-transition: all 5s ease-out 0s;            -webkit-transition: all 5s ease-out 0s;            -o-transition: all 5s ease-out 0s;            transition: all 5s ease-out 0s;            background: #636;        }        #ease-in-out        {            -moz-transition: all 1s ease-in-out 2s;            -webkit-transition: all 1s ease-in-out 2s;            -o-transition: all 1s ease-in-out 2s;            transition: all 1s ease-in-out 2s;            background: #3e6;        }        #linear        {            -moz-transition: all 6s linear 0s;            -webkit-transition: all 6s linear 0s;            -o-transition: all 6s linear 0s;            transition: all 6s linear 0s;            background: #999;        }        #cubic-bezier        {            -moz-transition: all 4s cubic-bezier 1s;            -webkit-transition: all 4s cubic-bezier 1s;            -o-transition: all 4s cubic-bezier 1s;            transition: all 4s cubic-bezier 1s;            background: #6d6;        }        #box.timings-demo-hover .transition-demo, #box:hover .transition-demo        {            -moz-transform: rotate(360deg) scale(1.2);            -webkit-transform: rotate(360deg) scale(1.2);            -o-transform: rotate(360deg) scale(1.2);            transform: rotate(360deg) scale(1.2);            background: #369;            border: 1px solid rgba(255,230,255,08);            -moz-border-radius: 25px;            -webkit-border-radius: 25px;            border-radius: 25px;            margin-left: 280px;            height: 30px;            line-height: 30px;            margin-bottom: 15px;        }    </style></head><body>    <div id="box">        <div id="linear" class="transition-demo">            勻速</div>        <div id="ease" class="transition-demo">            逐漸層慢</div>        <div id="ease-in" class="transition-demo">            加速</div>        <div id="ease-out" class="transition-demo">            減速</div>        <div id="ease-in-out" class="transition-demo">            加速然後減速</div>        <div id="cubic-bezier" class="transition-demo">            自訂</div>    </div></body></html>

當然css3也提供了真正的動畫處理方式Animation，Animation和其他很多動畫技術一樣，採用的是主要畫面格Keyframes，但控制比較多，下次我獨立寫一個關於css動畫的吧。

Columns

我們有討論過說，web頁面就是文檔，文檔上的元素布局是非常重要的，往往我們需要對文字進行豎排布局，現在css3開始支援了。不過IE9不支援。

css的columns支援多列，列邊距，列邊框和誇列，下面的代碼描述了這些實現

<head>    <title></title>    <style type="text/css">        article        {            -moz-column-count: 5;            -webkit-column-count: 5;            column-count: 5;            -moz-column-width: auto;            -webkit-column-width: auto;            column-width: auto;            -webkit-column-gap: 5px;            -moz-column-gap: 5px;            column-gap: 5px;            -webkit-column-gap: 20px;            -moz-column-gap: 20px;            column-gap: 20px;            -moz-column-rule: 5px solid red;            -webkit-column-rule: 5px solid red;            column-rule: 5px solid red;        }        h1        {            background: orange;            border-bottom: 3px double;            margin: 5px 0;            -webkit-column-span: all;            -moz-column-span: all;            column-span: all;        }    </style></head><body>    <article>        <h1>            電腦專業不好嗎？</h1>        <p>        電腦專業曾經是考大學最熱門的專業之一——你想啊，現在我們已經進入資訊社會，        電腦技術已經滲透到我們工作和生活的各個角落，而且，人類社會的發展也要建立在電腦技術大發展的基礎之上，        這個專業當然應該是很有前景的！然而，由於前幾年電腦和軟體相關專業的招生量急劇膨脹，        高校的師資和其他相關資源的瓶頸制約了對電腦人才的培養。就我們的調查來看，        很多高校老師都沒有真正的企業實踐經驗，所以往往把一些專業課和基礎課上得很“枯燥”，        理論闡述太多、實踐動手很少、課程門類開得太多、技術之間的聯絡講得太少，學生的學習興趣提不起來。        因此，企業對於大學畢業生也不太“感冒”，認為大學生眼高手低、知識和技能滯後、什麼都不會做！        其實，很多電腦專業的學生都有和你一樣的痛苦，你不是一個人在苦惱！我們認為，不是專業出了問題，        而是專業人才的教育和訓練出了問題。最近幾年，中國企業對軟體人才的需求量每年都在以30%以上的速度增長，        很多企業求才若渴：軟體業的大學生，入職薪資就要比平均薪資高20%，        而且一般過三～五年，月薪就能實現翻兩番達到萬元以上！        除了電腦，還有哪個行業的薪資增長有這樣的速度？        </p>    </article></body>

CSS的簡單入門就到這裡了，休息一下，以後有機會繼續深入討論下