成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

從零單排之CSS3

劉福 / 2845人閱讀

摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說起來?xiàng)l目繁多，乍看之下與之前比起來復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請(qǐng)看任意一個(gè)按鈕即可寫到此處不禁跟大家說，最好還是配合預(yù)編譯來寫。

CSS3 概覽

CSS3大法好

今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩，不過考慮到自己才華實(shí)在有限的有點(diǎn)有限，就不丟人了，只做一首就好了。

CSS3大法真是好， 前端群眾學(xué)到老。
圓角陰影好旋轉(zhuǎn)， 移動(dòng)扭曲加縮放。
顏色漸變和背景， 偽類動(dòng)畫跑不了。
布局選擇多媒體， 字體響應(yīng)就是屌。

CSS3說起來?xiàng)l目繁多，乍看之下與之前CSS2比起來復(fù)雜了好多。其實(shí)多出的部分主要?dú)w結(jié)為兩點(diǎn)：
1.是各瀏覽器廠商的前綴（-webkit, -moz, -o）
2.則是CSS3新增的動(dòng)畫，由于是新增的，所以看著陌生。
第一點(diǎn)和第二點(diǎn)結(jié)合起來就會(huì)導(dǎo)致css的代碼看起來老長老長。
所以如果你弄清這一點(diǎn)的話，應(yīng)該對(duì)于CSS3就不會(huì)顯得那么頭大了。

CSS3 簡介

簡介就是簡單介紹，那么下面讓我以《CSS3大法好》來和大家簡單介紹一下CSS3， 希望能幫助大家更好的去學(xué)習(xí)CSS3。
圓角指的即使border-radius, 一般正式的寫法為：

div {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

效果請(qǐng)看sf任意一個(gè)按鈕即可
寫到此處不禁跟大家說，CSS3最好還是配合CSS預(yù)編譯來寫?？蛇x的有LESS，SASS，Stylus(這個(gè)沒接觸過) 額外插一句最近看SASS，發(fā)現(xiàn)SASS優(yōu)于LESS最明顯一點(diǎn)是SASS有compass，而LESS毛都木有。跑題了...
言歸正傳，其實(shí)CSS3不僅帶來了圓角，同時(shí)也帶來了border-image,看屬性名大家應(yīng)該知道是什么意思了。
陰影其實(shí)可以分為兩部分看text-shadow和box-shadow，不過雖然兩個(gè)都是dow，但是待遇仍是不那么一樣，首先不同一點(diǎn)就是兩個(gè)屬性的值不同：

div {
    box-shadow: none | [inset? && [   ? ? ? ] ]
    (內(nèi)陰影) x軸偏移， y軸偏移，(模糊)， 顏色
    text-shadow: none | [,]* where  is: [ ?   ? |   ? ? ]
    顏色，x軸偏移，y軸偏移，(模糊) 或者 x軸偏移，y軸偏移，(模糊)，顏色
    //舉個(gè)例子
    box-shadow: 4px 4px 5px #f00;
    text-shadow: #f00 4px 4px 5px;
}

然后text-shadow是IE10， box-shadow是IE9。
隨便寫寫居然這么多了， 其他的放在第二期吧。
(PS: 大家覺得我有必要寫一些demo嗎，直接放在github上面給大家參考？)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110932.html

相關(guān)文章

  • 從零單排系列之寫一個(gè)類vue框架(一)

    摘要：因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開始之前先簡單說一下，我?guī)缀鯖]用過這個(gè)框架寫過項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說法。先整理用法，然后再整理自己的框架。 因?yàn)槲蚁Ｍ@是一個(gè)系列的文章，所以開始之前先簡單說一下，我?guī)缀鯖]用過vue這個(gè)框架寫過項(xiàng)目，所以文章中難免會(huì)有一些比較外行的說法。當(dāng)然，我用過一些時(shí)間的angular，也曾經(jīng)解決過一些同行們vue方面的問題。所以如果有人原因看的...

    raise_yang 評(píng)論0 收藏0

  • 從零單排系列之寫一個(gè)類vue框架(二)

    摘要：昨天寫了一下節(jié)點(diǎn)綁定的替換，已經(jīng)如何檢測的方法今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定看下昨天的代碼這里是在實(shí)現(xiàn)雙向綁定之前，先普及一個(gè)和的知識(shí)。如果強(qiáng)行給之前的賦值，就會(huì)發(fā)生無限的情況。畢竟還在正式學(xué)習(xí)期。 昨天寫了一下節(jié)點(diǎn)綁定model的替換，已經(jīng)如何檢測model 的方法今天優(yōu)化一下，勉強(qiáng)實(shí)現(xiàn)一個(gè)雙向綁定看下昨天的代碼 function Vue(obj) { ...

    learn_shifeng 評(píng)論0 收藏0

  • 前端從零單排之AJAX(第一期)

    摘要：作為一個(gè)有追求的前端，這是不可以接受的。兩大特性在不刷新頁面的情況下向服務(wù)器端發(fā)送請(qǐng)求從服務(wù)器端接收數(shù)據(jù)，并進(jìn)行對(duì)應(yīng)的邏輯處理請(qǐng)求流程首先先建立一個(gè)異步請(qǐng)求對(duì)象第一步的對(duì)象設(shè)置已經(jīng)好了。在閉包中進(jìn)行相關(guān)的操作。 ajax的使用一直是以jQuery為主，對(duì)于底層的實(shí)現(xiàn)有點(diǎn)不明覺厲。作為一個(gè)有追求的前端，這是不可以接受的。便讓我們今晚好好走進(jìn)ajax的內(nèi)心世界。 ajax 兩大特性： ...

    Mertens 評(píng)論0 收藏0

  • 前端從零單排之Gulp(第二期)

    摘要：是個(gè)類似于的前端工作流工具，今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個(gè)文件然后就已經(jīng)安裝好了，馬上就可以進(jìn)入簡單的配置了。但是在使用的工作之中會(huì)遇到一些問題。 gulp 是個(gè)類似于grunt的前端工作流工具，今天就簡單的介紹一下gulp和一些我的使用感受 Installing gulp 在Terminal中安裝全局gulp...

    xiaolinbang 評(píng)論0 收藏0

  • 前端從零單排之LESS（第四期)

    摘要：函數(shù)更多的用處在于封裝一些需要加前綴的屬性，或是多個(gè)參數(shù)的屬性，同時(shí)命名一定要足夠的語義化。適當(dāng)嵌套，以保持的優(yōu)雅。有時(shí)要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個(gè)符號(hào)具體如下安裝同時(shí)推薦在線編譯網(wǎng)站，能夠?qū)崟r(shí)看到效果。 LESS 是一門CSS預(yù)編譯語言，猶記得當(dāng)初打算使用CSS預(yù)編譯語言的時(shí)候，可選的有SASS、LESS、Stylus三門，剛好那個(gè)時(shí)候在學(xué)習(xí)bootst...

    Drummor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<