建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)前端開(kāi)發(fā)中CSS3的相關(guān)知識(shí)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供召陵網(wǎng)站建設(shè)、召陵做網(wǎng)站、召陵網(wǎng)站設(shè)計(jì)、召陵網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、召陵企業(yè)網(wǎng)站模板建站服務(wù)，十余年召陵做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
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 }說(shuō)明：
name : 字體名稱
url : 使用絕對(duì)或相對(duì)地址指定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" 開(kāi)頭的所有 div 元素的背景色：
div[class^="test"]
{
background:#ffff00;
}3、 [class*="abc"]
class的值中含有"abc"的元素。
div[class*="abc"]
代表只有div內(nèi)class=abc的樣式
4、指定最后一個(gè)p標(biāo)簽背景樣式
p:last-child{ background:#ff0000;}5、顯示設(shè)備分辨率最小768并且最大979時(shí)候顯示abc（CSS3）
@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}ie6-ie9支持
6、div > span （IE6不支持）
div > span{字體12px}
div標(biāo)簽內(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個(gè)值為0時(shí)，代表左右邊框陰影 為1px范圍
第1個(gè)值為正整數(shù) 代表 左邊框陰影
第1個(gè)值為負(fù)整數(shù) 代表 右邊框陰影
同理
第2個(gè)值為0 代表上下邊框陰影
第2個(gè)值為正整數(shù) 代表1px陰影距離上邊框多少
第1個(gè)值為負(fù)整數(shù) 代表下邊框陰影設(shè)置
border-radius圓角
9、:first-letter
p:first-letter{font-size:20px}
代表p標(biāo)簽內(nèi)第一個(gè)字大小為20px
10、div:first-line { color:red;font-size:16px; }
代表DIV中第一行文字為紅色字體為16px
11、p a:first-child { color: green }
代表p盒子里第一個(gè)a超鏈接字體顏色為綠色
12、p:before { content:"我在這" }
代表p標(biāo)簽對(duì)象前加入一段內(nèi)容：“我在這”
13、table:after { content: END OF TABLE }
代表在table對(duì)象后顯示內(nèi)容“END OF TABLE ”
14、單冒號(hào)與雙冒號(hào)
偽元素由雙冒號(hào)和偽元素名稱組成。雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時(shí)支持舊的偽類，比如:first-line、:first-letter、:before、:after等。
那么現(xiàn)在就可以完整的回答標(biāo)題中的問(wèn)題了，對(duì)于CSS2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的。
所以，如果你的網(wǎng)站只需要兼容webkit、firefox、opera等瀏覽器，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號(hào)寫法比較安全。
15、.uploader input[type=file]{}
代表class為uploader 盒子內(nèi)input標(biāo)簽屬性為type=file設(shè)置樣式
感謝各位的閱讀！關(guān)于“前端開(kāi)發(fā)中CSS3的相關(guān)知識(shí)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
當(dāng)前題目：前端開(kāi)發(fā)中CSS3的相關(guān)知識(shí)
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/iheejp.html
