CSS3 精華一頁紙

CSS3 對(duì)應(yīng)CSS新增特性

盒子模型


盒子模型的 邊框

1片效、可以有圓角 border-radis

2显熏、可以有圖片 border-image / 當(dāng)然還有圖片填充效果

盒子模型的 陰影

1丘逸、box-shadow 任何元素都可以使用陰影

通過陰影丙者,可以實(shí)現(xiàn)立體卡片式 的效果哥纫; 用作做文字便簽/圖像的便簽扎唾;比如 京東和途牛點(diǎn)評(píng)的卡片貼

2召川、text-shadow 文本也有了陰影效果

盒子模型的 width/height

1、使用 box-sizing 可以指明 width/height 是指的哪一部分

背景


背景圖片的特效

1胸遇、可以支持同時(shí)多個(gè)圖片做為背景疊加荧呐,分別做平鋪處理

2、可以控制背景圖片的大小纸镊,占滿整個(gè)元素(在2中倍阐,只能平鋪等處理)

3、可以控制背景圖片在 盒子模型中的顯示 區(qū)域

增加了很多PS才有的特色功能

1逗威、漸變效果:線性漸變 linear-gradient/radial-gradient 可以指定任意角度收捣,是否重復(fù),等各種漸變效果

2庵楷、圖片濾鏡:實(shí)現(xiàn)各種 飽和度/色彩/模糊 功能的用法

可以自有使用瀏覽器字體外的字體

@font-size

響應(yīng)式布局


多媒體查詢 + 響應(yīng)式圖像 = 響應(yīng)式web頁面 (PC/移動(dòng)端自適應(yīng)罢艾?)

1楣颠、通過 @media 多媒體查詢,可以 使用PC的各種瀏覽器調(diào)整咐蚯; 更可以通過這個(gè)適應(yīng) 移動(dòng)端

2童漩、響應(yīng)式圖像,避免了圖像的擴(kuò)展溢出超過父元素的大小

補(bǔ)充閱讀:響應(yīng)式web春锋,媒體查詢

動(dòng)畫


2D轉(zhuǎn)換 & 過渡

1矫膨、通過 2D轉(zhuǎn)換 實(shí)現(xiàn)很多動(dòng)態(tài)效果,最常用的是 translate 沿著x期奔,y軸移動(dòng)元素侧馅,比如實(shí)現(xiàn)的 按鈕按下/彈起效果;scale 呐萌,圖像從小變大馁痴,從大到小的變換。

2肺孤、通過使用 transition [屬性] 時(shí)長罗晕,實(shí)現(xiàn)過渡效果

這兩者結(jié)合可以實(shí)現(xiàn),很多 組件的動(dòng)畫效果赠堵。

同時(shí) 2D轉(zhuǎn)換 還可以結(jié)合 動(dòng)畫 實(shí)現(xiàn)類似效果

動(dòng)畫

1小渊、@keyframes donghua 定義動(dòng)畫過渡的多個(gè)樣式,可以是 from to 或者 百分比

2茫叭、在 元素樣式中指定 這個(gè)動(dòng)畫 animation:donghua 5s;

彈性盒子布局

新增的布局好像沒啥太多的使用意義酬屉?

雜項(xiàng)

文本換行 word-wrap;多列 column-count

總結(jié)就是

1揍愁、增加了動(dòng)畫效果:2D轉(zhuǎn)換 過渡 動(dòng)畫

2梆惯、增加了顯示立體感:盒子模型的陰影/圓角 背景圖片等等

3、響應(yīng)式web頁面

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吗垮,一起剝皮案震驚了整個(gè)濱河市垛吗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌烁登,老刑警劉巖怯屉,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饵沧,居然都是意外死亡锨络,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人级野,你說我怎么就攤上這事薯鳍。” “怎么了吼砂?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵舔哪,是天一觀的道長臀脏。 經(jīng)常有香客問我虏冻,道長肤粱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任厨相,我火速辦了婚禮领曼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛮穿。我一直安慰自己庶骄,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布践磅。 她就那樣靜靜地躺著单刁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪音诈。 梳的紋絲不亂的頭發(fā)上幻碱,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天绎狭,我揣著相機(jī)與錄音细溅,去河邊找鬼。 笑死儡嘶,一個(gè)胖子當(dāng)著我的面吹牛喇聊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蹦狂,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼誓篱,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了凯楔?” 一聲冷哼從身側(cè)響起窜骄,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎摆屯,沒想到半個(gè)月后邻遏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡虐骑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年准验,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片廷没。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡糊饱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出颠黎,到底是詐尸還是另有隱情另锋,我是刑警寧澤滞项,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站砰蠢,受9級(jí)特大地震影響蓖扑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜台舱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一律杠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧竞惋,春花似錦柜去、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至浑厚,卻和暖如春股耽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钳幅。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工物蝙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人敢艰。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓诬乞,卻偏偏與公主長得像,于是被迫代替她去往敵國和親钠导。 傳聞我的和親對(duì)象是個(gè)殘疾皇子震嫉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

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

  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,621評(píng)論 0 7
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,756評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫牡属、插件票堵、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評(píng)論 4 62
  • 書:書寫的方法,手拿著毛筆寫東西逮栅。 聿:yù手拿毛筆寫字悴势。筆:竹子做的就是筆。律:用筆寫出來的你必須走的路证芭。津:手...
    Cherrie_Hou閱讀 774評(píng)論 0 49
  • 二十出頭的年紀(jì) 不像早戀可以毫無顧慮 不夠成熟卻也不那么幼稚 沒有能力卻有野心 沒有驕傲的資本 怎么敢說愛誰 說散...
    她和她的貓丶閱讀 264評(píng)論 0 0