話(huà)題背景：如今網(wǎng)頁(yè)展示的姿勢(shì)是這樣的
圖片來(lái)自：設(shè)計(jì)之家
炫酷的網(wǎng)頁(yè)展示桅狠，支撐它的正是強(qiáng)大的CSS3讼载，還有什么理由不想一探究竟呢轿秧？
CSS3帶來(lái)的新特色
1.選擇器
2.盒模型（新的一種布局形式，F(xiàn)lex布局）
3.背景和邊框
4.文字特效
5.2D/3D轉(zhuǎn)換
6. 動(dòng)畫(huà)
7. 多列布局
8.用戶(hù)界面
現(xiàn)在許多主流瀏覽器都已經(jīng)完美的支持CSS3的屬性了
本期我要和大家分享的
1.? CSS3邊框詳解
2.? CSS3圓角詳解
3. CSS3背景詳解
4.? CSS3漸變?cè)斀?/b>
5.? CSS3文本效果詳解
后續(xù)還會(huì)和大家分享其他重要的模塊
CSS3邊框詳解
我們以前寫(xiě)邊框樣式的時(shí)候咨堤，經(jīng)常會(huì)這樣寫(xiě)：border: 1px solid red; 1像素實(shí)線(xiàn)紅色邊框,亦或1px dashed red,虛線(xiàn)邊框,或者你只需要某一邊加邊框：border-left(right/top/bottom)：1px solid red;只需要左邊框菇篡。或者有的同學(xué)喜歡拆開(kāi)來(lái)寫(xiě)：border-style一喘，border-width,border-color.這里要提一下邊框的style驱还， 以下均boder-style： 開(kāi)頭
1.none:? 無(wú)邊框,與任何指定的border-width值無(wú)關(guān)(也就是邊框樣式失效的意思~)
2.hidden : 隱藏邊框,IE不支持
3.dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線(xiàn)。否則為實(shí)線(xiàn)（常用）
4.dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線(xiàn)凸克。否則為實(shí)線(xiàn)（常用）
5.solid : 實(shí)線(xiàn)邊框（常用）
6.double : 雙線(xiàn)邊框议蟆。兩條單線(xiàn)與其間隔的和等于指定的border-width值
7.groove : 根據(jù)border-color的值畫(huà)3D凹槽
8.ridge : 根據(jù)border-color的值畫(huà)菱形邊框
9.inset : 根據(jù)border-color的值畫(huà)3D凹邊
10.outset : 根據(jù)border-color的值畫(huà)3D凸邊
這里給大家演示一下后四個(gè)，常用的我就不演示了~~上圖
平時(shí)寫(xiě)的時(shí)候触徐，還是推薦大家用縮寫(xiě)的形式咪鲜，除非一些特殊的應(yīng)用場(chǎng)景.
我要看CSS3，你給我說(shuō)這些干嘛撞鹉，不要急疟丙，這就給你送上~~
CSS3邊框新屬性：
1. border-radius: 允許你向元素添加圓角（css2中我們處理圓角還是有點(diǎn)麻煩的~）
2.box-shadow: 添加陰影
3.border-image：邊界圖片（也就是用圖片來(lái)創(chuàng)建你的邊框）
border-radius
以下div均是長(zhǎng)寬100px，5像素邊實(shí)線(xiàn)紅色
單個(gè)值：border-radius: 10px;
四個(gè)邊都有圓角（上下左右）：
聰明的同學(xué)也許會(huì)想到：border-radius:10px 5px 5px 10px鸟雏；（參照margin/padding的寫(xiě)法）
我們明顯的可以看到右上角和左上角的區(qū)別享郊，遵循順時(shí)針（左上角，右上角孝鹊，右下角炊琉，左下角）
那么它可以拆開(kāi)來(lái)寫(xiě)嗎？當(dāng)然可以又活，此處舉一個(gè)例子：border-radius-top-left(記住上放在前邊苔咪，聰明的你一定知道其他三個(gè)怎么寫(xiě)了)左上角的意思.
數(shù)學(xué)那么好的你，用它來(lái)畫(huà)一個(gè)圓也一定很簡(jiǎn)單吧~border-radius:100px柳骄；
如果畫(huà)半圓呢团赏？ 同樣的道理 :border-radius: 100px 100px 0 0 ;此處的height要改成50px
出于對(duì)舊版本瀏覽器的關(guān)照：
-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius
box-shadow
我們先看一下效果：
和我們平時(shí)用的ps，調(diào)陰影效果差不多耐薯，如果用過(guò)ps來(lái)理解這里的屬性應(yīng)該會(huì)容易多了~
首先舔清，我們來(lái)看下官方怎么說(shuō)的：
{box-shadow: inset x-offset y-offset blur-radius spread-radius color};
翻譯就是：{box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}; (其實(shí)我也是有點(diǎn)看不明白（懵逼）的~)
先看下這段代碼：
box-shadow:10px? 10px? 5px? #888888;
這都經(jīng)歷了哪些？o((⊙﹏⊙))o曲初，我們拆分開(kāi)來(lái)看一下：
第一個(gè)值10px : 必選体谒，水平陰影的位置。允許負(fù)值臼婆，也就是所謂的X軸偏移量
第二個(gè)值：必需的抒痒。垂直陰影的位置。允許負(fù)值颁褂，所謂Y軸偏移量
第三個(gè)：可選項(xiàng)评汰。 blur也就是模糊程度
第四個(gè)：可選項(xiàng)纷捞。 顏色（有人說(shuō)，沒(méi)顏色還有陰影被去？ 你的影子有顏色嗎haha~）
當(dāng)然還有一些其他的可選項(xiàng)：比如spread/inset/(可選主儡。陰影的大小,和外層的陰影（開(kāi)始時(shí)）改變陰影內(nèi)側(cè)陰影),感興趣的同學(xué)，自己試一下惨缆，就不做演示了糜值。
給大家感受一下常用屬性變化的過(guò)程：
對(duì)舊版本瀏覽器的照顧：
-moz-box-shadow:? //Firefox4.0-
-webkit-box-shadow:? ? //Safari and Google chrome10.0-
box-shadow:? //Firefox4.0+ 、 Google chrome 10.0+ 坯墨、 Oprea10.5+ and IE9
border-image
語(yǔ)法:? border-image:source? slice? width? outset? repeat|initial|inherit;
其實(shí)它完整的寫(xiě)法是：border-image-source
首先介紹一下source:? 這個(gè)屬性聲明了border image的資源寂汇。它可以使一個(gè)url,data URI, CSS 漸變，或者是SVG捣染。
slice : 告知瀏覽器骄瓣，怎么切圖。圖片會(huì)被切成九塊耍攘，四個(gè)角榕栏，四條邊，以及中間塊蕾各。（在其他開(kāi)發(fā)平臺(tái)上扒磁，通常稱(chēng)之為九宮圖）（這個(gè)單詞，有js基礎(chǔ)的同學(xué)一定會(huì)發(fā)現(xiàn)式曲，在處理數(shù)組那一塊用于選取指定位置并且返回新元素~妨托，在這里的解釋也差不多了~）這個(gè)屬性接受四個(gè)無(wú)單位正整數(shù)，百分比吝羞，以及fill關(guān)鍵字,初始值為100%兰伤。無(wú)單位整數(shù)會(huì)在格柵圖片中轉(zhuǎn)換為像素值，在SVG中轉(zhuǎn)換成坐標(biāo)點(diǎn)钧排。百分比則會(huì)相對(duì)于圖片大小敦腔。它可以接受一到四個(gè)參數(shù)弯院，格式類(lèi)似padding,margin等历葛。默認(rèn)的情況下，中間部分的內(nèi)容會(huì)被丟棄。
參考：HelKyle寫(xiě)的border-image屬性解讀
width:這個(gè)屬性設(shè)置了border image的寬度筒捺。它可以接受一個(gè)百分比，無(wú)單位正整數(shù)纸厉，或者關(guān)鍵字auto系吭。（用法類(lèi)似padding）。默認(rèn)值為1颗品，意思是如果沒(méi)有設(shè)置border-image-width但是設(shè)置了border或者border-width肯尺，那么border iamge的寬度就會(huì)是border-width沃缘。
outset:這個(gè)屬性可以設(shè)置borderimage 可以超出border box的區(qū)域大小。默認(rèn)值為0.這個(gè)屬性接受四個(gè)無(wú)單位正整數(shù)则吟。
repeat:這個(gè)屬性控制image如何填充border槐臀。它可以設(shè)置兩個(gè)方向的屬性，水平方向和垂直方向氓仲。（和background-image差不多）
補(bǔ)充：
stretch: 默認(rèn)值水慨，border image會(huì)被拉伸來(lái)填充內(nèi)容區(qū)域
repeat: 圖片會(huì)重復(fù)，可能出現(xiàn)斷片（不能顯示完整）
round: 圖片會(huì)平鋪敬扛，并且會(huì)適當(dāng)壓縮或拉伸晰洒，避免斷片
說(shuō)的天花亂墜的，我要看效果啥箭，OK谍珊，上圖~
看上去好像沒(méi)啥區(qū)別，放大仔細(xì)看急侥，還是有的砌滞。這里我選的是一張風(fēng)景圖片，看上去都是綠的所以變化不會(huì)太大缆巧，如果用像多邊形這樣的設(shè)計(jì)元素做素材布持，做出的邊框效果一看便知曉，這里就不去演示了陕悬，感興趣的多試試~
CSS3背景
看到這里题暖，大家要打起十二分的精神啦，我要開(kāi)始講故事啦~
我們先回顧一下前景：
設(shè)置所有背景屬性：background: #00FF00 url(bgimage.gif) no-repeat fixed top;
拆分開(kāi)的屬性：
background-color ：背景顏色
background-position ： 規(guī)定背景圖像的位置
background-size ： 規(guī)定背景圖片的尺寸
background-repeat ： 規(guī)定如何重復(fù)背景圖像
background-origin ： 規(guī)定背景圖片的定位區(qū)域
background-clip ： 規(guī)定背景的繪制區(qū)域
background-attachment : 規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-image : 規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置
我要講的捉超，已經(jīng)被我加粗啦~如果有同學(xué)對(duì)其他屬性不理解胧卤，可參考此處
background-size
語(yǔ)法集：background-size: length | percentage | cover | contain;
length : 該屬性值是設(shè)置背景圖像的寬度和高度的，第一個(gè)值是寬度拼岳，第二個(gè)值是設(shè)置高度的枝誊。如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”;
percentage : 該屬性是以父元素的百分比來(lái)設(shè)置圖片的寬度和高度的惜纸，第一個(gè)值是寬度叶撒，第二個(gè)值是高度。如果只設(shè)置一個(gè)值耐版，那么第二個(gè)值會(huì)被設(shè)置為 “auto”;
cover : 把背景圖像擴(kuò)展至足夠大祠够，以使背景圖像完全覆蓋背景區(qū)域。
contain: 把圖像擴(kuò)展至最大尺寸粪牲，以使寬度和高度 完全適應(yīng)內(nèi)容區(qū)域古瓤。
基本屬性了解了，讓我們來(lái)感受下有什么不同~（此處會(huì)貼上原圖和加上屬性后的比較）
首先，DIV的長(zhǎng)寬都是300px,第一張圖落君，背景填充穿香，沒(méi)有加任何屬性，第二張绎速，加了size屬性只取了一個(gè)值皮获，第三張也只加了size屬性，但是取了兩個(gè)值纹冤。比較這三張圖魔市，可以清晰的看出添加屬性的DIV中的背景圖明顯縮小了。（當(dāng)然這里的取值可以是百分比赵哲，可以取200%嘛待德，hh當(dāng)然可以，都說(shuō)了是百分比了）是不是size屬性就是用來(lái)縮小背景圖呢枫夺？來(lái)将宪，看圖說(shuō)話(huà)~
從圖片上來(lái)看，很清晰的看到中間的圖片被放大了（這是我做商城放大鏡項(xiàng)目用到的圖橡庞，突然想起來(lái)的~~圖上的小姐姐很美~~）.最后一張被縮小了较坛，為了展示被縮小的區(qū)域，我給這個(gè)DIV添加了邊框扒最，當(dāng)然還有no-repeat屬性丑勤。所以SIZE屬性是用來(lái)控制縮放的而不是縮小~
我們?cè)倏?
圖片大小是300x300的，容器600X600吧趣，第一張空間太大法竞，所以他會(huì)默認(rèn)的repeat，第二張加了background-size：cover顯得就很飽滿(mǎn)了~完全覆蓋背景區(qū)
接著我們?cè)賮?lái)看看contain的實(shí)現(xiàn)效果：
為了區(qū)分它們强挫，我把高度變高了一點(diǎn)岔霸，從圖片上很容易理解這兩個(gè)屬性，cover覆蓋所以背景區(qū)俯渤，而contain只是將圖片尺寸拉到最大以適應(yīng)這個(gè)區(qū)域呆细，其他沒(méi)有覆蓋到的地方，它會(huì)默認(rèn)重復(fù)八匠。
background-orign
為了考慮瀏覽器兼容性的問(wèn)題絮爷，我們最好這樣寫(xiě)（兩個(gè)一起加上）：
background-origin:padding || border || content
background-origin:padding-box || border-box || content-box
該屬性指定background-position屬性應(yīng)該是相對(duì)位置，需要注意的是加上background-attachment是"固定"梨树，這個(gè)屬性沒(méi)有任何效果坑夯。
我們看一下取值情況：
padding-box? 背景圖像填充框的相對(duì)位置
border-box? ? 背景圖像邊界框的相對(duì)位置
content-box ? 背景圖像的相對(duì)位置的內(nèi)容框
乍一看，好像挺抽象的劝萤，嗯渊涝，確實(shí)~~~lai, 我們看圖
從圖片上慎璧，我們很容易的發(fā)現(xiàn)床嫌，它們所在的參考位置不同跨释。這兩個(gè)容器大小一樣，bg-position屬性都是100px 100px厌处，感興趣的同學(xué)可以多試試不同的值輸入鳖谈。
background-clip
語(yǔ)法 ： background-clip: border-box|padding-box|content-box;
屬性指定背景繪制區(qū)域
我們看一下取值情況：
border-box? 默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）阔涉。
padding-box? ? 背景繪制在襯距方框內(nèi)（剪切成襯距方框）缆娃。
content-box? ? 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。
和orign屬性取值一樣瑰排，同樣的我們來(lái)看圖：
前提是贯要，邊框要是虛的，至于為什么椭住，留給你們自己思考~hh.崇渗，好，我們來(lái)比較下京郑，這三個(gè)容器我都是加了padding 20px的宅广，我們知道在一個(gè)DIV中加了padding，里面的內(nèi)容就會(huì)如圖三顯示些举，當(dāng)然在內(nèi)容沒(méi)有溢出的情況下跟狱。那么這個(gè)灰色快就是內(nèi)容，所以背后繪制開(kāi)始就是那里開(kāi)始（content）户魏，再看第二張驶臊，它是從邊框開(kāi)始繪制的，第一個(gè)更好理解叼丑。
background-image
這里主要提一下多重背景的寫(xiě)法：
background-image: url(img_flwr.gif), url(paper.gif);? 指定兩張背景圖
background-position: right bottom, left top; 第一張右下角资铡，第二張左上角
background-repeat: no-repeat, repeat; 第一張不重復(fù)，第二張重復(fù)
這是我在學(xué)這個(gè)屬性的時(shí)候截下的圖幢码，覺(jué)得不錯(cuò)笤休，拿來(lái)做案例~~來(lái)自：此處
CSS3漸變
不知不覺(jué)，一口氣寫(xiě)了這么多了~~給自己點(diǎn)贊症副，好店雅，閑話(huà)不多說(shuō)，讓我們帶著興趣一起來(lái)看看CSS是如何做到漸變效果的~~~
我們都知道漸變分為兩種贞铣，第一種是線(xiàn)性漸變闹啦，第二種是徑向漸變。（因?yàn)槲覍?duì)PS比較熟悉辕坝，所以在學(xué)這個(gè)屬性的時(shí)候還是挺簡(jiǎn)單的~）
專(zhuān)業(yè)術(shù)語(yǔ)（屬性）：
線(xiàn)性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
語(yǔ)法： background: linear-gradient(direction,color-stop1,color-stop2, ...);
來(lái)窍奋，我們直接看實(shí)例：
我們?cè)谟眠@個(gè)屬性的時(shí)候，就要考慮瀏覽器兼容性了，此處貼上代碼給大家看一下：
background:-webkit-linear-gradient(red,blue);/*Safari 5.1 - 6.0*/
background:-o-linear-gradient(red,blue);/*Opera 11.1 - 12.0*/
background:-moz-linear-gradient(red,blue);/*Firefox 3.6 - 15*/
background:linear-gradient(red,blue);/*標(biāo)準(zhǔn)的語(yǔ)法*/
它實(shí)現(xiàn)了從頂部開(kāi)始的線(xiàn)性漸變琳袄，起點(diǎn)是紅色江场，慢慢過(guò)渡到藍(lán)色
同樣的道理，你想從左上角left top只要改變方向就可以了窖逗，這里我就不一一演示了址否，感興趣的同學(xué)可以多摸索摸索~~我們來(lái)看下面的漸變形式
你肯定發(fā)現(xiàn)它漸變的方向改變了，那么還是單純的寫(xiě)left/top right之類(lèi)的嗎碎紊？hhh,這里想說(shuō)明一下佑附，方向他不止只有上北下南左西右東，對(duì)仗考，還有角度的變化音同！大概看一下，能猜測(cè)出我這里的角度是125度（i zhuang bi）秃嗜，所以大家可以嘗試一下不同的角度瘟斜，測(cè)試一下。
貼出一段代碼給大家參考下：background: linear-gradient(125deg, red, blue);（注意考慮瀏覽器的兼容性）
那么問(wèn)題來(lái)了痪寻，我想要五顏六色的螺句，該怎么弄？強(qiáng)大的CSS3允許我們用使用多個(gè)顏色節(jié)點(diǎn)橡类∩呱校看圖：
萬(wàn)變不離其蹤，只需要多添加一個(gè)顏色的值就可以了顾画，此處貼上一段代碼供大家參考：
background: linear-gradient(45deg,red,green, blue);（瀏覽器兼容性參考上面）
我們看到的漸變都是很淡很淡的取劫，灰灰的色調(diào)，你這個(gè)這么純研侣，要不要這么難看谱邪？不就是加個(gè)透明度嘛，有什么了不起的庶诡，CSS3也可以做暗胍（hhh不吹牛了，看圖~~）
我們看圖（為了圖省事末誓，沒(méi)有太過(guò)意RGB的值扯俱，所以顏色比較單調(diào)），和上面的幾個(gè)漸變形式比較起來(lái)喇澡，我們可以清晰的看出迅栅，它從一個(gè)透明度0到1的一個(gè)過(guò)程。具體實(shí)現(xiàn)：（下面要講的晴玖，瀏覽器兼容性我就不說(shuō)了读存，參考前面的）
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
就是顏色換成了高大上的rgba为流，a就是這里的透明度.
如果用過(guò)PS的同學(xué)，你在圖層上做漸變的圖形時(shí)让簿，時(shí)常會(huì)不斷的拉漸變（就是漸變線(xiàn)）它會(huì)不斷的發(fā)生變化敬察，那么在CSS3這里怎么去實(shí)現(xiàn)呢？有的人會(huì)想拜英，這不簡(jiǎn)單，在來(lái)一段這樣的代碼改變它的透明度方向琅催，顏色什么的居凶。如果這么想的同學(xué)，那我只能認(rèn)為藤抡，你CSS基礎(chǔ)不夠扎實(shí)侠碧，我們知道，瀏覽器構(gòu)建DOM樹(shù)的過(guò)程中缠黍，它的遇到重復(fù)的樣式弄兜，它會(huì)自動(dòng)覆蓋前邊的樣式。所以這里是行不通的瓷式，那么怎么實(shí)現(xiàn)呢替饿？給大家介紹一個(gè)新屬性：
repeating-linear-gradient
這就是重復(fù)線(xiàn)性漸變的效果，此處貼上代碼供大家參考：
background: repeating-linear-gradient(red, yellow 10%, green 20%);
CSS3徑向漸變
理解了線(xiàn)性漸變贸典，那么徑向漸變也是如此道理：
語(yǔ)法：background: radial-gradient(center, shape size, start-color, ..., last-color);
供大家參考：background: radial-gradient(red, green, blue);
供大家參考：background: radial-gradient(red 5%, green 15%, blue 60%);
這里要提一下：shape 參數(shù)定義了形狀视卢。它可以是值 circle 或 ellipse。其中廊驼，circle 表示圓形据过，ellipse 表示橢圓形。默認(rèn)值是 ellipse妒挎。
供大家參考：background: radial-gradient(circle, red, yellow, green);
參考：background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
這里補(bǔ)充一下：size 參數(shù)定義了漸變的大小绳锅。有四個(gè)值：closest-side? farthest-side? closest-corner? farthest-corner（感興趣的同學(xué)，自己試一下酝掩，就不一一演示了~~）
參考：background: repeating-radial-gradient(red, yellow 10%, green 15%);
什么鬼~~~zen me弄出了個(gè)棒棒糖
CSS3文本效果
說(shuō)到文本效果鳞芙，我給大家總結(jié)一些屬性好吧，具體的演示就不一一舉例了期虾，反正积蜻，學(xué)習(xí)來(lái)自興趣，感興趣就多敲幾個(gè)彻消，不感興趣竿拆，看看就行。好宾尚，廢話(huà)不多說(shuō)丙笋，開(kāi)工谢澈。
新增的主要幾大特性：
text-shadow： 文本陰影? 代碼參考：text-shadow:5px5px5px#FF0000;
box-shadow：盒子陰影? 參考：box-shadow:10px10px5px#888888;
單純添加顏色： box-shadow:10px10pxgrey;
添加模糊度：box-shadow:10px10px5pxgrey;
text-overflow: 文本溢出屬性指定應(yīng)向用戶(hù)如何顯示溢出內(nèi)容
參考：text-overflow:clip;? text-overflow:ellipsis;（兩個(gè)不同的）
word-wrap：允許長(zhǎng)文本換行? 參考：word-wrap:break-word;
word-break: 單詞拆分換行屬性指定換行規(guī)則
參考：word-break:keep-all;?
新屬性：
hanging-punctuation ： 規(guī)定標(biāo)點(diǎn)字符是否位于線(xiàn)框之外。
punctuation-trim? ： 規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪御板。
text-align-last? ： 設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行锥忿。
text-emphasis ： 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。
text-justify? ：? 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對(duì)齊方法怠肋。
text-outline? ： 規(guī)定文本的輪廓敬鬓。
具體的解釋和案例可以參考我加鏈接的，手冊(cè)上都寫(xiě)的很詳細(xì)的笙各。（就不一一shuo啦~~）
這里我要提一下钉答，網(wǎng)頁(yè)中如何引入漂亮的字體庫(kù)（CSS3）
@font-face?
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱(chēng)（比如 myFirstFont）杈抢，然后指向該字體文件数尿。
供大家參考：
@font-face{font-family:myFirstFont;? src:url(sansation_light.woff);}
div{font-family:myFirstFont;}
這里跟大家分享一下我寫(xiě)的一些文本效果（如果想要源代碼，評(píng)論區(qū)留下~~emai~）
開(kāi)始獻(xiàn)丑~~~~~
以上均是個(gè)人興趣惶楼，帶著興趣去摸索右蹦，也不是什么難事兒~
寄語(yǔ)：
雖然CSS3屬性，樣式五花八門(mén)歼捐，但是最重要的還是基礎(chǔ)何陆，用的樣式和屬性再多，最終在瀏覽器上輸出不來(lái)效果豹储，也是白搭甲献。興趣是最好的老師，靜下心來(lái)颂翼，不一定非要看什么10天精通CSS3這樣的教程視頻晃洒，文檔就在那，只是看你有沒(méi)有一顆愿意花時(shí)間的心~~希望這篇文章朦乏，能夠給需要的同學(xué)帶來(lái)幫助球及。
別人曾經(jīng)在學(xué)習(xí)上給了我很大的幫助，如今呻疹，我也想寫(xiě)點(diǎn)東西去幫助別人吃引，僅此而已~~~
商業(yè)用途轉(zhuǎn)載：需聯(lián)系作者
非商業(yè)用途需注明轉(zhuǎn)載處
