CSS3新特性

一.CSS3 Rounded Corners

通過使用CSS3 border-radius屬性嘶居，可以得到圓角的效果。

#rcorners {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

image.png

顯示效果如下，此時(shí)四個(gè)方向的圓角都會(huì)被設(shè)置税课。
如果想單獨(dú)設(shè)置4個(gè)方位的圓角：

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

二.CSS3 Border Images

通過使用CSS3 border-image 屬性闲延，可以將一幅圖片設(shè)置成為一個(gè)元素的邊框。
看下面一段代碼：

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 100px;
        }

其中 boredr.png 是下面這幅圖韩玩，大小為81*81：

border.png

顯示效果如下：

image.png

注意：為了使 border-image 正常生效垒玲，需要設(shè)置元素的 border 屬性。
border-image 屬性是以下幾個(gè)屬性的簡(jiǎn)寫：

border-image-source：指定圖片的位置找颓。
border-image-slice：指定圖片的裁剪方式合愈。
border-image-width：指定圖片的顯示寬度。
border-image-outset：指定圖片相對(duì)于邊框的偏移位置击狮。
border-image-repeat：指定四條邊框的圖片是拉伸還是重復(fù)佛析。
其中 border-image-slice 可以參考下面這篇文章：
http://blog.sina.com.cn/s/blog_5f2389f90102vks0.html

三.CSS3 Backgrounds

CSS3允許多個(gè)背景圖片，有以下兩種寫法：

一次性設(shè)置所有的背景圖片和屬性

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

單獨(dú)設(shè)置每個(gè)背景圖片的屬性

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

CSS3 Background Size
在 background-size 出現(xiàn)之前彪蓬，背景圖片的大小是無(wú)法修改的寸莫。它是圖片的實(shí)際大小。
CSS3 background-size 屬性允許你設(shè)置背景圖片的大小寞焙。

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

background-size 有兩個(gè)可選的值 contain 和 cover

contain：背景圖片的大小盡可能的放大储狭，但是不會(huì)超過容器的大小，所以容器有一部分可能沒有被背景圖片覆蓋捣郊。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: contain;
        }

image.png

cover ：背景圖片的大小盡可能的放大辽狈，放大到將容器完全覆蓋為止。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: cover;
        }

image.png

background-size 也可以同時(shí)指定多個(gè)背景圖片的大星荷：

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

Full Size Background Image
如果我們想要實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)上固定的背景圖片刮萌，那該怎么辦呢？

html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

注意其中的 fixed娘扩，這個(gè)屬性是 background-attachment 屬性的一個(gè)取值着茸。

CSS3 background-origin Property
background-origin 屬性指定背景圖片的位置，它又下面三種取值：

border-box：背景圖片從左上角的邊框開始琐旁。

image.png

padding-box（默認(rèn)）：背景圖片從padding的左上角開始涮阔。

image.png

content-box：背景圖片從內(nèi)容的左上角開始。

image.png

CSS3 background-clip Property
background-clip 屬性指定了背景圖片的填充區(qū)域灰殴，有以下三種取值：

border-box（默認(rèn)）：背景填充至邊框敬特。
padding-box：背景填充至padding。
content-box：背景填充至content牺陶。

四.CSS3 Gradients

CSS3 Linear Gradients
語(yǔ)法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(red, yellow); /* Standard syntax */
        }

image.png

Linear Gradient - Left to Right

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to right, red , yellow); /* Standard syntax */
        }

image.png

Linear Gradient - Diagonal（對(duì)角線）

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
        }

image.png

為了更加靈活的控制漸變方向伟阔，我們還可以自定義漸變角度。
語(yǔ)法：
background: linear-gradient(angle, color-stop1, color-stop2);

#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
        }

image.png

#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */
        }

image.png

不難發(fā)現(xiàn)角度的規(guī)律掰伸。

image.png

Using Transparency（透明度）
需要使用透明度的話皱炉，需要使用rgba()函數(shù)來(lái)定義顏色，該函數(shù)的最后一個(gè)參數(shù)用來(lái)指定顏色透明度狮鸭。

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
            background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
            background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
        }

image.png

Repeating a linear-gradient

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            /* Safari 5.1 to 6.0 */
            background: -webkit-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Opera 11.1 to 12.0 */
            background: -o-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Firefox 3.6 to 15 */
            background: -moz-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Standard syntax */
            background: repeating-linear-gradient(red, yellow 20%, green 30%);
        }

image.png

其中顏色屬性中的百分比指的是顏色停止位置占容器長(zhǎng)度的百分比值合搅。

CSS3 Radial（徑向） Gradients
語(yǔ)法：

background: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient - Evenly Spaced（間隔均勻） Color Stops (this is default)

        #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
            background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
            background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
            background: radial-gradient(red, yellow, green); /* Standard syntax */
        }

image.png

Radial Gradient - Differently Spaced Color Stops（自定義間隔）

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
            background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
            background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
            background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
        }

image.png

Set Shape（定義漸變中心形狀）
1.circle
2.ellipse（默認(rèn)）

Repeating a radial-gradient

#grad {
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

五.CSS3 Shadow Effects

CSS3 Text Shadow

h2 {
           text-shadow: 2px 20px;
        }

image.png

可以看出第一個(gè)長(zhǎng)度參數(shù)控制的是陰影的水平位置多搀，第二個(gè)參數(shù)控制的是陰影的垂直位置。

h2 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
        }

image.png

第三個(gè)參數(shù)控制的是陰影的特效灾部，第四個(gè)參數(shù)可以自定義陰影顏色酗昼。

多個(gè)陰影

 h2 {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        }

image.png

h2 {
            color: yellow;
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }

image.png

CSS3 box-shadow Property
語(yǔ)法：box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，陰影的水平位置
v-shadow	必需梳猪，陰影的垂直位置
blur	可選麻削。模糊距離。
spread	可選春弥。陰影的尺寸呛哟。
color	可選提揍，陰影的顏色云芦。
inset	可選溪掀，將外部陰影 (outset) 改為內(nèi)部陰影园欣。

用box-shadow實(shí)現(xiàn)一個(gè)常用的卡片效果

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

效果如下：

image.png

六.CSS3 Text

text-overflow
這個(gè)屬性控制當(dāng)你的文字超出容器時(shí)該如何顯示。

text-overflow: clip;

text-overflow: ellipsis;

image.png

word-wrap
word-wrap：break-word屬性使得一個(gè)很長(zhǎng)的文字自動(dòng)換行夏醉。
word-break
word-break屬性指定了換行的規(guī)則岗憋。

keep-all：只在連字符處換行
break-all：默認(rèn)換行绪颖。

七.CSS3 Web Fonts

Web字體允許Web設(shè)計(jì)人員使用未安裝在用戶計(jì)算機(jī)上的字體抡笼。

@font-face {
   font-family: myFirstFont;             //自定義字體名字
   src: url(sansation_light.woff);      //字體文件路徑
}

div {
   font-family: myFirstFont;
}

八.CSS3 2D Transforms

translate()
rotate()
scale()
skewX()
skewY()
matrix()

1. The translate() Method

translate()方法可以使得元素相對(duì)于當(dāng)前的位置水平和垂直移動(dòng)苏揣。

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

移動(dòng)之后的元素還是占據(jù)其之前在文檔中的位置。

2.The rotate() Method

rotate()方法可以使得元素旋轉(zhuǎn)一定角度推姻。

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

image.png

3.The scale() Method

scale()方法可以使得元素在寬度和高度方向伸長(zhǎng)或者縮小平匈。

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

4.The skewX() Method

skewX()方法根據(jù)給定的角度使得元素在X軸方向傾斜。

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

image.png

5.The skewY() Method

skewY()方法根據(jù)給定的角度使得元素在Y軸方向傾斜藏古。

6.The skew() Method

前兩個(gè)方法的結(jié)合

7.The matrix() Method

matrix()是將之前的六個(gè)方法結(jié)合在一起：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

九.CSS3 3D Transforms

rotateX()：將元素沿X軸旋轉(zhuǎn)一定角度增炭。
rotateY()：將元素沿Y軸旋轉(zhuǎn)一定角度。
rotateZ()：將元素沿Z軸旋轉(zhuǎn)一定角度拧晕。
詳細(xì)參考鏈接：https://www.w3schools.com/css/css3_3dtransforms.asp

十.CSS3 Transitions

CSS3 transitions 可以使的屬性的變換更加平滑隙姿。

div {
    transition-property: width;     //指定要應(yīng)用的屬性
    transition-duration: 2s;        //指定時(shí)間間隔
    transition-timing-function: linear;    //指定過度類型
    transition-delay: 1s;     //指定延遲時(shí)間
}

transition-timing-function取值如下：

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end

十一.CSS3 Animations

最后編輯于：2017.12.09 03:01:55

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市厂捞，隨后出現(xiàn)的幾起案子输玷，更是在濱河造成了極大的恐慌，老刑警劉巖蔫敲，帶你破解...
沈念sama閱讀 216,402評(píng)論 6贊 499
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件饲嗽，死亡現(xiàn)場(chǎng)離奇詭異炭玫，居然都是意外死亡奈嘿，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,377評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門吞加，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)裙犹，“玉大人尽狠，你說我怎么就攤上這事∫镀裕” “怎么了袄膏？”我有些...
開封第一講書人閱讀 162,483評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)掺冠。經(jīng)常有香客問我沉馆，道長(zhǎng)，這世上最難降的妖魔是什么德崭？我笑而不...
開封第一講書人閱讀 58,165評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任斥黑，我火速辦了婚禮，結(jié)果婚禮上眉厨，老公的妹妹穿的比我還像新娘锌奴。我一直安慰自己，他們只是感情好憾股，可當(dāng)我...
茶點(diǎn)故事閱讀 67,176評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布鹿蜀。她就那樣靜靜地躺著，像睡著了一般服球。火紅的嫁衣襯著肌膚如雪茴恰。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,146評(píng)論 1贊 297
城市分裂傳說
那天斩熊，我揣著相機(jī)與錄音琐簇，去河邊找鬼。笑死座享，一個(gè)胖子當(dāng)著我的面吹牛婉商，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播渣叛，決...
沈念sama閱讀 40,032評(píng)論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼丈秩，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了淳衙？” 一聲冷哼從身側(cè)響起蘑秽，我...
開封第一講書人閱讀 38,896評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎箫攀，沒想到半個(gè)月后肠牲，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,311評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡靴跛，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,536評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年缀雳，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梢睛。...
茶點(diǎn)故事閱讀 39,696評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡肥印，死狀恐怖识椰，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情深碱，我是刑警寧澤腹鹉，帶...
沈念sama閱讀 35,413評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站敷硅，受9級(jí)特大地震影響功咒，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绞蹦，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,008評(píng)論 3贊 325
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一航瞭、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧坦辟，春花似錦刊侯、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,659評(píng)論 0贊 22
一樁弒父案滨彻，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至挪蹭，卻和暖如春亭饵，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背梁厉。一陣腳步聲響...
開封第一講書人閱讀 32,815評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工辜羊，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人词顾。一個(gè)月前我還...
沈念sama閱讀 47,698評(píng)論 2贊 368
代替公主和親
正文我出身青樓八秃，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親肉盹。傳聞我的和親對(duì)象是個(gè)殘疾皇子昔驱，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,592評(píng)論 2贊 353

CSS3新特性

一.CSS3 Rounded Corners

二.CSS3 Border Images

三.CSS3 Backgrounds

四.CSS3 Gradients

五.CSS3 Shadow Effects

六.CSS3 Text

七.CSS3 Web Fonts

八.CSS3 2D Transforms

1. The translate() Method

2.The rotate() Method

3.The scale() Method

4.The skewX() Method

5.The skewY() Method

6.The skew() Method

7.The matrix() Method

九.CSS3 3D Transforms

十.CSS3 Transitions

十一.CSS3 Animations

推薦閱讀更多精彩內(nèi)容