摘要:概覽大法好今夜秋風陣陣,霧霾層層。布局選擇多媒體,字體響應就是屌。說起來條目繁多,乍看之下與之前比起來復雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個按鈕即可寫到此處不禁跟大家說,最好還是配合預編譯來寫。
CSS3 概覽 CSS3大法好
今夜秋風陣陣,霧霾層層。不禁讓人想作詩,不過考慮到自己才華實在有限的有點有限,就不丟人了,只做一首就好了。
CSS3大法真是好, 前端群眾學到老。 圓角陰影好旋轉, 移動扭曲加縮放。 顏色漸變和背景, 偽類動畫跑不了。 布局選擇多媒體, 字體響應就是屌。
CSS3說起來條目繁多,乍看之下與之前CSS2比起來復雜了好多。其實多出的部分主要歸結為兩點:
1.是各瀏覽器廠商的前綴(-webkit, -moz, -o)
2.則是CSS3新增的動畫,由于是新增的,所以看著陌生。
第一點和第二點結合起來就會導致css的代碼看起來老長老長。
所以如果你弄清這一點的話,應該對于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預編譯來寫。可選的有LESS,SASS,Stylus(這個沒接觸過) 額外插一句最近看SASS,發現SASS優于LESS最明顯一點是SASS有compass,而LESS毛都木有。跑題了...
言歸正傳,其實CSS3不僅帶來了圓角,同時也帶來了border-image,看屬性名大家應該知道是什么意思了。
陰影其實可以分為兩部分看text-shadow和box-shadow,不過雖然兩個都是dow,但是待遇仍是不那么一樣,首先不同一點就是兩個屬性的值不同:
div { box-shadow: none | [inset? && [? ? ? ] ] (內陰影) 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上面給大家參考?)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110932.html
摘要:因為我希望這是一個系列的文章,所以開始之前先簡單說一下,我幾乎沒用過這個框架寫過項目,所以文章中難免會有一些比較外行的說法。先整理用法,然后再整理自己的框架。 因為我希望這是一個系列的文章,所以開始之前先簡單說一下,我幾乎沒用過vue這個框架寫過項目,所以文章中難免會有一些比較外行的說法。當然,我用過一些時間的angular,也曾經解決過一些同行們vue方面的問題。所以如果有人原因看的...
摘要:昨天寫了一下節點綁定的替換,已經如何檢測的方法今天優化一下,勉強實現一個雙向綁定看下昨天的代碼這里是在實現雙向綁定之前,先普及一個和的知識。如果強行給之前的賦值,就會發生無限的情況。畢竟還在正式學習期。 昨天寫了一下節點綁定model的替換,已經如何檢測model 的方法今天優化一下,勉強實現一個雙向綁定看下昨天的代碼 function Vue(obj) { ...
摘要:作為一個有追求的前端,這是不可以接受的。兩大特性在不刷新頁面的情況下向服務器端發送請求從服務器端接收數據,并進行對應的邏輯處理請求流程首先先建立一個異步請求對象第一步的對象設置已經好了。在閉包中進行相關的操作。 ajax的使用一直是以jQuery為主,對于底層的實現有點不明覺厲。作為一個有追求的前端,這是不可以接受的。便讓我們今晚好好走進ajax的內心世界。 ajax 兩大特性: ...
摘要:是個類似于的前端工作流工具,今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個文件然后就已經安裝好了,馬上就可以進入簡單的配置了。但是在使用的工作之中會遇到一些問題。 gulp 是個類似于grunt的前端工作流工具,今天就簡單的介紹一下gulp和一些我的使用感受 Installing gulp 在Terminal中安裝全局gulp...
摘要:函數更多的用處在于封裝一些需要加前綴的屬性,或是多個參數的屬性,同時命名一定要足夠的語義化。適當嵌套,以保持的優雅。有時要考慮兼容性,需要避免編譯某條屬性,方法即在值的前面加一個符號具體如下安裝同時推薦在線編譯網站,能夠實時看到效果。 LESS 是一門CSS預編譯語言,猶記得當初打算使用CSS預編譯語言的時候,可選的有SASS、LESS、Stylus三門,剛好那個時候在學習bootst...
閱讀 2866·2021-11-11 10:58
閱讀 1920·2021-10-11 10:59
閱讀 3489·2019-08-29 16:23
閱讀 2324·2019-08-29 11:11
閱讀 2785·2019-08-28 17:59
閱讀 3838·2019-08-27 10:56
閱讀 2049·2019-08-23 18:37
閱讀 3111·2019-08-23 16:53