這篇文章給大家分享的是有關(guān)前端開發(fā)中CSS3的相關(guān)知識的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

定陶網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)公司于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

1、設(shè)置字體（兼容所有瀏覽器）

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

說明：

name : 　字體名稱

url : 　使用絕對或相對地址指定OpenType字體

sRules : 　樣式表定義

設(shè)置嵌入HTML文檔的字體。

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

2、div[class^="test"]

設(shè)置只有div內(nèi) class 屬性值以 "test" 開頭的所有 div 元素的背景色：

div[class^="test"]
{
background:#ffff00;
}

3、 [class*="abc"]

class的值中含有"abc"的元素。

div[class*="abc"]

代表只有div內(nèi)class=abc的樣式

4、指定最后一個p標簽背景樣式

p:last-child{ background:#ff0000;}

5、顯示設(shè)備分辨率最小768并且大979時候顯示abc（CSS3）

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9支持

6、div > span （IE6不支持）

div > span{字體12px}

div標簽內(nèi)的兒子span樣式為字體12px，div內(nèi)孫子span不起作用，具有優(yōu)先

7、字體陰影

.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef; }

陰影字體靠左距離 靠下距離 陰影距離范圍 陰影顏色

字體背景+字體陰影

8、盒子陰影

-moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset;

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性

-o代表opera蘋果瀏覽器

設(shè)置

border-radius:0px 5px 5px 0px; 代表邊框右上和右下 圓角為5px

box-shadow:0px 0px 1px #fff inset;代表邊框間距靠左0 靠上0 和1px陰影范圍 陰影顏色為白色

有inset 代表框內(nèi)陰影 不帶inset 代表框外陰影

注意：box-shadow:0px 0px 1px #fff

第1個值為0時，代表左右邊框陰影 為1px范圍

第1個值為正整數(shù) 代表 左邊框陰影

第1個值為負整數(shù) 代表 右邊框陰影

同理

第2個值為0 代表上下邊框陰影

第2個值為正整數(shù) 代表1px陰影距離上邊框多少

第1個值為負整數(shù) 代表下邊框陰影設(shè)置

border-radius圓角

9、:first-letter

p:first-letter{font-size:20px}

代表p標簽內(nèi)第一個字大小為20px

10、div:first-line { color:red;font-size:16px; }

代表DIV中第一行文字為紅色字體為16px

11、p a:first-child { color: green }

代表p盒子里第一個a超鏈接字體顏色為綠色

12、p:before { content:"我在這" }

代表p標簽對象前加入一段內(nèi)容：“我在這”

13、table:after { content: END OF TABLE }

代表在table對象后顯示內(nèi)容“END OF TABLE ”

14、單冒號與雙冒號

偽元素由雙冒號和偽元素名稱組成。雙冒號是在當前規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時支持舊的偽類，比如:first-line、:first-letter、:before、:after等。

那么現(xiàn)在就可以完整的回答標題中的問題了，對于CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。

所以，如果你的網(wǎng)站只需要兼容webkit、firefox、opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。

15、.uploader input[type=file]{}

代表class為uploader 盒子內(nèi)input標簽屬性為type=file設(shè)置樣式

感謝各位的閱讀！關(guān)于“前端開發(fā)中CSS3的相關(guān)知識”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：前端開發(fā)中CSS3的相關(guān)知識-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/desjdd.html