CSS3系列教程:簡介
CSS3不是新事物,更不是隻是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡,已經準備好了首次登場,呷著咖啡,等著瀏覽器來鋪上紅地毯。你看,瀏覽器需要跟上了……
注意:瀏覽器需要改進
儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣,但是需要了解的是,CSS3並沒有被當前瀏覽器完全的支援。也就是說,如果你要在你的網站中使用CSS3,請確認有針對不支援CSS3的瀏覽器的相容方法。
CSS3的瀏覽器支援狀況:
- Firefox 4+
- Google Chrome 3+
- Internet Explorer 9+
- Safari 3.2.1+
什麼是CSS,什麼是CSS3?
非常簡單,CSS代表“Casading Style Sheets”,就是樣式表,是一種替代併為網站新增樣式的標記性語言。CSS3只是表示下一代CSS,3只是版本號。
如果CSS3還沒有完全被支援,那麼我為什麼要寫CSS3呢?
因為學習新東西時間很有趣的事情!
而且有人常常問我如何實現圓角。我解釋了很多遍如何使用圖片或CSS3實現,這裡我通過寫一些我學到的一些東西的方式來希望能夠幫助其他的有需要的人。
當然你也不必只看我說的。Eric Meyer是一個瞭解CSS很多的傳奇人物,這裡有個很棒的對Eric的訪談,討論CSS3,很值得一讀。
測試,我特別製作了一個關於本系列教程的
CSS3系列教程|前端觀察
特別宣告,本系列文章譯自:Zen Elements,非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.
相關推薦
CSS3系列教程:簡介
CSS3不是新事物,更不是隻是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡,已經準備好了首次登場,呷著咖啡,等著瀏覽器來鋪上紅地毯。你看,瀏覽器需要跟上了…… 注意:瀏覽器需要改進 儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣,但是需
[譯] 程式構建系列教程簡介(開篇) — 前端系列教程
原文地址:Composing Software: An Introduction 原文作者:[Eric Elliott](Eric Elliott) 譯文出自:掘金翻譯計劃 本文永久連結:github.com/xitu/gold-m… 譯者:Sam 校對者:Mcsk
前端測試框架Jest系列教程 -- 簡介
系列教程: 寫在前面: 隨著網際網路日新月異的發展,使用者對於頁面的美觀度,流暢度以及各方面的體驗有了更高的要求,我們的網頁不再是簡單的承載文字,圖片等簡單的資訊傳遞給使用者,我們需要的是更加美觀的頁面展示,更快的瀏覽速度,更加的豐富的使用者互動效果。好的使用者體驗必要需要優秀的前
CSS3系列教程:HSL 和HSLA
使用CSS3 HSL宣告同樣是用來設定顏色的。下一個呢? HSLA? 是的,這個和RGBA的效果是一樣的。 HSL宣告使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設定顏色。 Hue衍生於色盤:0和360是紅色,接近120的是綠色,240是藍
CSS3系列教程:多列/多卷
使用CSS3可以為你的網站建立多列,而不用為每列制定特定的層或段落。 與多背景圖片一樣,CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法,請在下面的評論中提交你的連結,我很高興能確認這種方法能用
CSS3系列教程:嵌入字型/網路字型
想要製作一些很酷的頭部效果而且擺脫網站安全字型並且不使用圖片檔案?那麼就使用CSS3嵌入字型吧! 要使用一款字型,我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字型檔案。 儘管這樣,讓我們簡單的學習一下字型方面的歷史。@font-face屬性從CSS2就已經考
CSS3系列教程:RGBA
使用新的CSS3的”RGBA”宣告,不僅僅讓我們像通常一樣設定RGB顏色,而且還可以設定其透明度。 RGBA像RGB一樣設定顏色,而這個”A”——RGBA中的最後一個值——允許我們設定該元素的透明度。就像opacity宣告一樣,一個opacity值為1的元素是完全不透明的,而一個opa
CSS3系列教程:邊框顏色
現在我們來看一看如何為邊框的border-color新增更多的色彩。 使用CSS3的border-radius屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是隻聲明瞭5
CSS3系列教程:背景圖片(背景大小和多背景圖)
背景圖片/紋理有很多種使用方式,常常用於為新增網站的最佳的介面美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 CSS3的背景圖片大小可以寫成 background-size:Apx Bpx; Apx = x軸(圖片寬度) Bpx = y軸
CSS3系列教程:邊框半徑和圓角
頁面中圓角的實現是個很頭疼的問題,雖然現在有很多種實現方法,但是都是比較麻煩的。在本文中,讓我們看看如何使用CSS3 border-radius來實現圓角DIV。 跨瀏覽器相容性 就像在上一篇《CSS3系列教程:簡介》中提到的,並不是所有的瀏覽器支援CSS3,但是那些比較好的瀏覽器選
CSS3系列教程:陰影
陰影大約從CSS2就開始有了,但是隻有Safari一個瀏覽器支援它,到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上,就像圖片的陰影效果一樣。 一般可以分為box-shadow和text-shadow兩類。 CSS3的box-shadow和text-shadow可以寫做:bo
CSS3系列教程:透明度
CSS3透明…不透明…漸變…隨便你怎麼叫它吧!這裡是一些使用CSS3透明度的指南以及一些例子。 其實這個firefox很久以前就支援了,而IE一直不支援! “opacity”宣告用來設定一個元素的透明度:層、文字、圖片等…一個opacity的值為1的元素是完全不透明的,反之,值為0是
Hyper-V 2016 系列教程37 Windows 10 上的 Hyper-V 簡介
windows server 2012 2016; hyper-v;虛擬化以下內容部分取自微軟官網: 無論你是軟件開發人員、IT 專業人員還是技術愛好者,你們中的許多人都需要運行多個操作系統。 Hyper-V 讓你可以在 Windows 上以虛擬機形式運行操作系統或計算機系統,而不是將物理硬件
Docker深入淺出系列教程——Docker簡介
.com 創建 www 最新 效率 核心概念 遷移 操作系統 補充 我是架構師張飛洪,鉆進浩瀚代碼,十年有余,人不堪其累,吾不改其樂。如果你和我的看法不一樣,請關註我的頭條號,我們一起奇聞共賞,疑義相析。 本節屬於入門簡介,從三個小方面進行簡單介紹Docker。
flask框架系列教程(一) flask簡介及虛擬環境搭建
flask簡介 博主快兩個月沒更新了,原因是私下學了前端,奈何前端東西太多,即便以後想去做後端,也要明白JS jquery,這個有時間再發自己的理解,最近開始學習flask了,希望與諸位看客共同進步。前期先講基礎,過一段時間會把整個網站的建設過程發出來。
Git 系列教程(一)Git 簡介
1.關於版本控制Version control is a system that records changes to a file or set of files over time so that you can recall specific versions la
Java NIO系列教程(一)java NIO簡介
這個系列的文章,我們開始玩一玩IO方面的知識,對於IO和NIO,我們經常會接觸到,瞭解他們的基本內容,對於我們的工作會有特別大的幫助。這篇博文我們僅僅是介紹IO和NIO的基本概念,以及一些關鍵詞。 基本概念 IO是主存和外部裝置(硬碟、終端和網路)進行資
熊大UWB系列教程一: DW1000 超寬頻系統簡介及最小系統搭建
對超寬頻感興趣的朋友,請關注熊大的微信公眾號,熊大將在上面釋出超寬頻教程,行業資訊,技術應用。幫助你更好的瞭解、學習、使用超寬頻技術。 熊大DW1000系列教程一: DW1000 超寬頻系統簡介及最小系統搭建 DW1000是decawave公司於20
Java NIO系列教程(一) Java NIO 簡介
Java NIO系列教程(一) Java NIO 概述 原文連結 作者:Jakob Jenkov 譯者:airu 校對:丁一 Java NIO 由以下幾個核心部分組成: Channels Buffers Selectors 雖
python入門教程系列——python簡介
Python是著名的“龜叔”Guido van Rossum在1989年聖誕節期間,為了打發無聊的聖誕節而編寫的一個程式語言。 現在,全世界差不多有600多種程式語言,但流行的程式語言也就那麼20來種。如果你聽說過TIOBE排行榜,你就能知道程式語言的大致流行程度。這是最近