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的簡單入門就到這裏了，休息一下，以後有機會繼續深入討論下