CSS3下不一樣的陰影 背景和圓角邊框樣式

2021-06-22 13:18:19 字數 2068 閱讀 6880

css2.1 發布至今已有7年的歷史。css3的出現就是增強css2.1的功能,減少的使用次數以及解決html頁面上的特殊效果

當前,css3技術最適合在移動web開發中使用的特性包括:

●增強的選擇器

●陰影●強大的背景設定

●圓角邊框

現在的css3樣式已經支援陰影樣式效果。目前可使用的陰影的效果分為兩種:文字內容的陰影效果和元素的陰影效果。

box-shadow

css3的box-shadow屬性是讓元素具有陰影的效果,其語法如下:

box-shadow:| color:

其中第乙個 length 是陰影水平偏移值;第二個length值是陰影垂直偏移值;第三個值是陰影模糊值。水平和垂直偏移值可取正負值,如4px或-4px.

目前box-shadow已經得到大部分現代瀏覽器的支援。可是,當我們在基於webkit的chrome和safari等瀏覽器上使用該屬性時,需要將屬性的名稱寫成-webkit-box-shadow的形式。firefox瀏覽器則要寫成-moz-box-shadow的形式。

下面**為使用box-shadow的簡單示例,該示例相容chrome、safari及firefox瀏覽器:

text-shadow

text-shadow屬性用於設定文字內容的陰影效果或模糊效果。

目前,text-shadow屬性已得到safari、firefox、chrome和opera瀏覽器的支援。ie8以下的瀏覽器都不支援該特性。並且,大部分的移動web瀏覽器都得到了很好地支援。

box-shadow:| color:

如下**為text-shadow的簡單實用示例:

在css3規範中,css3對背景屬性增加了很多新特性。它既能支援背景的顯示範圍,也能支援多背景。最重要的是它可以通過屬性設定,為背景顏色設定漸變或任何顏色效果,功能非常豐富。

css3對於背景屬性的增強,以往我們使用來代替各種頁面修飾,逐漸可以通過該背景屬性替換。這些功能對頁面的載入速度,特別是在移動裝置平台,是乙個頁面效能的提公升。

background-size

background-size屬性用於設定背景影象的大小。

目前該屬性已經得到了chrome、safair、opera瀏覽器的支援,同時該屬性也支援android和ios平台的web瀏覽器。

background-size屬性在不同的web瀏覽器下語法方面有一定的差別。在基於webkite核心的瀏覽器chrome和safari瀏覽器下,其寫法為-webkit-background-size;

在移動開發專案中,建議採用相容模式的寫法,示例如下:

chrome和safari瀏覽器都支援background屬性的多重背景。由於它們是基於webkit的瀏覽器,因此該功能也被android和ios平台的移動瀏覽器支援。但鑑於採用的方式設定背景會嚴重過影響在移動web端的整體體驗和效能,因此可是使用webkit中的一種特性對其背景採用顏色漸變,而非採用方式。語法如下:

-webkit-gradient(, [,]?,[, ]? [, ]*)

type型別是指採用漸變型別,如線性漸變 linear 或徑向漸變 radiual。如下**:

在css3中已經能夠輕鬆的實現圓角效果,**中只要定義border-radius屬性就可以隨意實現圓角效果。

到目前為止,該屬性已得到chrome、safari、opera以及firefox瀏覽器的支援。但是,各瀏覽器之間寫法有些差別,例如:chrome和safari瀏覽器需要寫成-webkit-border-radius;firefox瀏覽器則要寫成-moz-border-radius;相容的示例**如下:

需要注意的是,border-radius屬性是不允許使用負值的,當其中乙個為0時,則該值對應的角為矩形,否則為圓角。

CSS,給我們不一樣的體驗

又遇見了css,第一次接觸它是在牛腩新聞發布系統中,那時候,知道了它是用來幫助我們調整網頁樣式布局的。有了之前的實踐,現在從理論出發,繼續學習css。對於乙個網頁設計者來說,都知道html語言是網頁製作的基礎。但如果希望網頁能夠美觀 大方,並且公升級方便,維護輕鬆,那麼就必須學習css,css在其中...

顧客想要的和說的不一樣

在軟體開發過程中也許我們天天要與客戶打交道,什麼樣的產品才是受使用者歡迎的,也許並不是那麼好琢磨。舉個例子,比如產品製造商在調查顧客需求的時候了解到客戶想要一把粗一點的剃鬚刀,這個需求很明確。不過當我們製造出了粗一點的剃鬚刀後,顧客對這樣的剃鬚刀也許並不感興趣,顧客真的想要一把粗的剃鬚刀嗎?在軟體設...

c 多型和c 中不一樣的地方

首先看 using system using system.collections.generic using system.linq using system.text using system.threading.tasks public virtual void printfield publ...