css3前綴是什么

本文小編為大家詳細介紹“css3前綴是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3前綴是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

 一 css3簡介

css3是css的最新標準.

css3向后兼容早期的css版本.

一些重要的新功能:

border radius:允許我們為元素創建圓角.

border images:允許我們指定一個圖像作為元素周圍的邊框.

multiple backgrounds:將多個背景應用于元素.

動畫(animations)和特效(effects),以及更多別的新功能.

box shadow(盒陰影)

使用box-shadow屬性,可以通過指定顏色,大小,模糊和偏移來將一個或多個陰影附加到元素.

gradients(漸變)

css3漸變允許我們將元素的背景顏色設置為漸變.有兩種類型的漸變可用:線性(linear)和徑向(radial).

transform(轉換)

通過css3轉換,我們可以移動,比例化,反過來,旋轉和拉伸元素.通過改變元素的屬性來實現一些動畫的效果.

animation(動畫)

css3中我們可以創建動畫,它可以取代許多網頁動畫圖像,flash動畫和JavaScripts.

二 css3(瀏覽器)前綴

css前綴用于區分并兼容各大主流瀏覽器對于css新功能的支持.

例如,Safari和Chrome的前綴是-webkit.Chrome,Safari和Mozilla目前支持border-radius屬性,只要帶有瀏覽器前綴即可生效.

html代碼:

<div class="-webkit-border-radius">陽光總在風雨后</div>

css代碼:

div.-webkit-border-radius{border:1px solid green; padding:20px; margin:20px; -webkit-border-radius: 24px ; }

通過添加前綴,能使css樣式在不受支持的瀏覽器中生效.有時候為了兼容更多的瀏覽器,你可能需要對同一個樣式屬性進行重復定義增加不同的前綴.

每個瀏覽器對應的前綴如下::

firefox -moz-

safari -webkit-

chrome -webkit-

opera -o-

ie -ms-

● 為了使樣式能夠兼容各種瀏覽器,前綴的寫法可能較為重復,但這只是短暫的.隨著瀏覽器的不斷改進,會逐漸兼容所有新樣式.這樣就可以不需要使用前綴寫法來兼容了.

三 css3圓角

通過border-radius屬性可以給任何元素設置"圓角"

html代碼:

<div class="border-radius">讀書多了,容顏自然改變</div>

css代碼:

div.border-radius{border-radius:20px;background-color:green;color:white; margin:20px; }

border-radius屬性可以通過(左上角,右上角,右下角,左下角)的順序進行設置.

css代碼:

border-radius:0 0 20px 30px;

border-radius的屬性值也可以是百分比.

●通過將元素的border-radius屬性設置為元素高度以及寬度的一半可以將圓角設置變成圓形.

示例中矩形元素的寬度和高度均為200px.通過將border-radius設置為150px,矩形元素將變成圓形.

html代碼:

<div class="border-radius3">橫眉冷對千夫指,俯首甘為孺子牛</div>

css代碼:

div.border-radius3{width:200px;  height:200px; border-radius:100px; background-color:green; color:white;  text-align: center; margin:30px;}

四 css3陰影

box-shadow屬性可以我元素增加陰影效果.

box-shadow屬性使用時,必須按順序設置

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:必需,水平陰影的位置.允許負值.

v-shadow:必需,垂直陰影的位置.允許負值.

blur:可選,模糊距離.

spread:可選,陰影的尺寸.

color:可選.陰影的顏色.

inset:可選,將外部陰影(outset)改為內部陰影.默認為outset.

html代碼:

<div class="box-shadow">先天下之憂而憂后天下之樂而樂</div>

css代碼:

div.box-shadow{width:300px; height:100px; background-color:#9ACD32; box-shadow:10px 10px #8888888; margin:30px; }

除了顏色(color)外,box-shadow元素還有兩個可選值,它們是模糊(blur)和擴展(spread)

負值也可以用于box-shadow中:

h-shadow:陰影將在框的左側

v-shadow:陰影將在框的上方.

blur:不予許使用負值

spread:負值會導致陰影縮小.

讀到這里，這篇“css3前綴是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。