淺析CSS3的新功能和新特性
邊框
border-color 屬性
boder-image 屬性
border-radius 屬性
box-shadow 屬性
背景
background-origin 屬性和 background-clip 屬性
background-size 屬性
多重背景
顏色
HSL 顏色值
HSLA 顏色值
opacity 屬性
RGBA 顏色值
文字效果
text-shadow 屬性
text-overflow 屬性
word-wrap 屬性
用戶界面
box-sizing 屬性
resize 屬性
outline 屬性
nav-top、nav-right、nav-bottom、nav-left 屬性
選擇器
屬性(attribute)選擇器
基本盒模型
overflow-x 屬性和 overflow-y 屬性
生成的內容
content 屬性
其它模塊
media queries 模塊
multi-column layout 模塊
Web 字體模塊
Speech 模塊
如何通過CSS3創建彩色的邊框
W3C已經在CSS3中爲邊框提供了一些新的選項,這些選項即圓角邊框、邊框顏色之後,也是非常有趣的。Mozilla/Firefox已經實現了這個允許你創建很酷的彩色邊框的函數
Border-image:在你的邊框中使用圖片
另一個令人興奮的CSS3中新的邊框特性是border-image屬性。有了這個特性你可以定義一個圖片以取代普通邊框。這個特性實際上可分爲一對屬性:border-image和border-corner-image。這兩個值可以縮寫,如下:
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image border-image目前已經在Safari和Firefox 3.1 (Alpha)下工作了。語法如下:
或
Border-radius:用CSS創建圓角邊框!
W3C已經在CSS3中提供了一些新的選項,border-radius是其中之一,Mozilla/Firefox和Safari 3都已經實現了這個允許你創建圓角盒模型的函數。例如:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
這些不同的角可以被分別控制,代碼如下:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Box-shadow,CSS3的最牛逼的新特性之一
CSS3背景和邊框模塊擁有一個非常好的新特性名叫box-shadow,它已經在Safari 3+和Firefox 3.1 (Alpha)中得以實現。其規則提及了多重陰影,但是作者已經對此提出了質疑,並且Safari 3並沒有將其實現。
此屬性由3個長度參數和一個顏色參數組成,其中長度參數有:
1. 陰影的橫向位移量,正值意味着陰影靠右,負值則靠左;
2. 陰影的縱向位移量,負值意味着陰影靠上,正值則靠下;
3. 褪色漸變半徑,如果值爲0則陰影會被直接切斷,值越高褪色漸變的效果就越明顯。例如:
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
此陰影會被僅靠圓角邊框的圓角而創建,例如:
box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;
background-origin和background-clip
Mozilla、Safari 3和Konqueror都已經實驗性實現了CSS3中的background-origin屬性和background-clip屬性。Opera在上一個公開版本中有一個穩定的、基於早期Opera 2.3中背景和邊框規範的基礎實現。
background-origin屬性用來決定如何在盒模型中計算background-position的值。
此屬性有三種取值:border-box、padding-box和content-box。如果你使用了padding-box,則背景的位置計算會相對於內邊距區域的左上角;border-box則相對於邊框的左上角;content-box則相對於其內容的左上角。基於Gecko或Webkit的瀏覽器使用了過時的規範版本,其取值爲border、padding和content。
background-clip屬性用來決定背景是否要擴展到邊框裏。默認值是border-box,即擴展到邊框裏。但如果將其賦值padding-box則不會。如果你使用content-box則背景只會在有內容的矩形區域顯示(這個可選值已經在最近的規範中去掉了)。
實驗性實現的代碼如下:
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip
穩定實現的代碼如下:
background-origin
background-clip
Background-size
CSS3給了你一種定義背景圖片尺寸的方式。你可以通過背景圖片寬高的像素值或百分比進行定義。當你使用百分比進行定義時,其圖片尺寸是相對於其盒模型通過background-origin定義的區域的長和寬的。
實現這一特性的瀏覽器有Opera 9.5、Safari 3、Firefox和Konqueror。他們分別使用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size屬性。
通過CSS3實現多重背景
CSS3允許同一個元素中有多個背景圖片。你可以用逗號將不同的背景定義分隔開已定義多重背景。比如:
目前已經實現這一屬性的.瀏覽器有:Webkit和KHTML (Konqueror)。
HSL顏色值
跟使用16進制的RGB(紅、綠、藍)顏色值一樣,CSS3也可以識別HSL(色相、飽和度、亮度)顏色值。
HSL顏色值有三個參數:
色相是指色盤的度數,0度或360度是紅色,120度是綠色,240度是藍色。我們可以在0度到360度之間取值以表示不同的色調。
飽和度值是一個百分數,100%表示完全飽和的顏色。
亮度值也是一個百分數,0%表示全黑,100%表示全白,50%則表示中間值。
這種顏色值爲我們確定可用顏色和風格提供了一個非常廣闊的空間。
現如今,HSL已經被Opera 9.5、Safari 3、Konqueror和Mozilla瀏覽器所實現。
相關文章
-
Windows10操作系統新功能特性介紹
2015年7月29日12點起,Windows 10推送全面開啓,Windows7、Windows8.1用戶可以升級到Windows 10,用戶也可以通過系統升級等方式升級到Win10,下面是本站小編分享的一些相關資料,供大家參考。1、對桌面用戶而言,微軟恢復了原有 -
英語文章賞析財富是成功的標誌Wealth is a Sign of Success
財富是成功的標誌(Wealth is a Sign of Success)Successful people enjoy fame, respect, admiration, pleasure and so on. Thus, without exception, everyone wishes to be successful in his or her life. Some peo -
Photoshop CS3的新功能
導讀:Adobe Photoshop是公認的最好的通用平面美術設計軟件,由美國的Adobe公司開發設計。其用戶界面易懂,功能完善,性能穩定,所以,在幾乎所有的廣告、出版、軟件公司,Photoshop都是首選的平面工具。就跟隨本站小編一起去了解 -
CSS中的zoom屬性和scale屬性的用法及區別
CSS中的zoom屬性和scale屬性的用法及區別是什麼呢?以下是小編整理的相關內容,歡迎閱讀學習! zoom 屬性 語法:zoom:normal | |默認值:normal適用於:所有元素繼承性:有 取值:normal:使用對象的實際尺寸。:用浮點數來定 -
2015下半年計算機二級access考試要點:報表和窗體功能
預覽及打印報表1. 預覽報表單擊數據窗口中【對象】欄下的【報表】按鈕,選中所需預覽的報表後,單擊工具欄中的【預覽】按鈕,即進入【打印預覽】窗口。打印預覽與打印真實結果一致。如果報表記錄很多,一頁容納不下,在每 -
淺談js和css內聯外聯的注意事項
簡單說:這兩個問題其實是同一個問題,但是網上找了好久也找不到方法,外聯的js和css文件裏不能有任何HTML的標記註釋,一旦有,瀏覽器就瘋了!一去掉就好了!!!問題:起因是網上看到一個css的表格樣式,覺得挺好看,就打算放在自己的程序裏 -
jQuery css方法動態修改CSS屬性
英雄好漢會聚梁山伯。在《水滸傳》氣勢軒昂的文字裏,在一場場鬥智鬥勇的戰鬥裏,我看到了梁山伯一百單八將各具風采的閃光點,看到了兄弟之間的血肉情誼。《水滸傳》真實而生動地反映了農民起義,圍繞着官逼民反的線索展開。 -
計算機二級Access數據庫查詢的功能教程
引導語:査詢是Access數據庫的重要對象,以下是本站小編分享給大家的計算機二級Access數據庫查詢的功能教程,歡迎閱讀!查詢的功能使用Access的最終目的是通過對數據庫中的數據進行各種處理和分析,從中提取有用信息。查 -
SunJavaSE6的新性能
JavaSE是Java平臺標準版的簡稱,用於開發和部署桌面、服務器以及嵌入設備和實時環境中的Java應用程序。yjbys小編下面爲你整理了關於SunJavaSE6的新性能的文章,希望對你有所幫助。 1.性能和質量:Java 6 同Java 5不一樣 -
2017最新計算機二級Access考試題與答案解析
全國計算機等級考試二級每年考三次。2017年3月考試將近,不知道同學們都複習得怎麼樣了呢?以下是本站小編搜索整理的一份2017最新計算機二級Access考試題與答案解析,供參考練習,希望對大家有所幫助!想了解更多相關信息請