從零單排之CSS3

劉福發(fā)布于2019-08-28 17:59 / 2796人閱讀

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

CSS3 概覽

CSS3大法好

今夜秋風陣陣，霧霾層層。不禁讓人想作詩，不過考慮到自己才華實在有限的有點有限，就不丟人了，只做一首就好了。

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

CSS3說起來條目繁多，乍看之下與之前CSS2比起來復雜了好多。其實多出的部分主要歸結為兩點：
1.是各瀏覽器廠商的前綴（-webkit, -moz, -o）
2.則是CSS3新增的動畫，由于是新增的，所以看著陌生。
第一點和第二點結合起來就會導致css的代碼看起來老長老長。
所以如果你弄清這一點的話，應該對于CSS3就不會顯得那么頭大了。

CSS3 簡介

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

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

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

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

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

云服務器 GPU云服務器單排 css3 css3氣泡 css3動畫

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110932.html

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

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

raise_yang 2019-08-23 18:26 評論0 收藏0
從零單排系列之寫一個類vue框架(二)

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

learn_shifeng 2019-08-23 18:27 評論0 收藏0
前端從零單排之AJAX(第一期)

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

Mertens 2019-08-21 12:17 評論0 收藏0
前端從零單排之Gulp(第二期)

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

xiaolinbang 2019-08-21 12:17 評論0 收藏0
前端從零單排之LESS（第四期)

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

Drummor 2019-08-28 17:55 評論0 收藏0