-
background-clip用來將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實際需要。 語法： background-clip ： border-box | padding-box | content-box | no-clip 參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。backgroud-clip默認值為border-box。查看全部
-
background-origin設(shè)置元素背景圖片的原始起始位置。 語法background-origin：border-box|padding-box|content-box; 參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認值），或者是內(nèi)容區(qū)域開始顯示。 需要注意的是:如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。查看全部
-
結(jié)構(gòu)性偽類選擇器—nth-last-child(n) “:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個子元素開始計算，來選擇特定的元素查看全部
-
結(jié)構(gòu)性偽類選擇器—nth-child(n) “:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時，選擇器將選擇不到任何匹配的元素。 經(jīng)驗與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當(dāng)表達式的值為0或小于0的時候，不選擇任何匹配的元素查看全部
-
結(jié)構(gòu)性偽類選擇器—last-child “:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器， ul>li:last-child{background:blue;}查看全部
-
結(jié)構(gòu)性偽類選擇器—first-child “:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。查看全部
-
結(jié)構(gòu)性偽類選擇器—target :target選擇器稱為目標(biāo)選擇器，用來匹配文檔(頁面)的URI的某個標(biāo)志符的目標(biāo)元素。具體來說，URI中的標(biāo)志符通常會包含一個#號，后面帶有一個標(biāo)志符名稱 HTML代碼： <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> CSS代碼： .menuSection p { display: none; } :target p { display:block; }查看全部
-
結(jié)構(gòu)性偽類選擇器—empty :empty選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格。 示例顯示： 比如說，你的文檔中有三個段落p元素，你想把沒有任何內(nèi)容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。 HTML代碼： <p>我是一個段落</p> <p> </p> <p></p>? CSS代碼： p{ background: orange; min-height: 30px; } p:empty { display: none; }查看全部
-
結(jié)構(gòu)性偽類選擇器—not :not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。 例如 input:not([type="submit"]){ border:1px solid red; }查看全部
-
結(jié)構(gòu)性偽類選擇器—root :root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。 :root”選擇器等同于<html>元素，簡單點說： :root{background:orange} html {background:orange;} 得到的效果等同。 建議使用:root方法。 另外在IE９以下還可以借助“:root”實現(xiàn)hack功能。查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作3D旋轉(zhuǎn)導(dǎo)航</title> <style> @import url("http://www.w3cplus.com/demo/css3/base.css"); /*任務(wù)一：引入本地字體文件*/ @font-face { font-family: 'sansationregular'; src: url('http://www.w3cplus.com/demo/css3/3DA查看全部
-
* 含有 任意位置 ^ 開頭 $ 結(jié)尾查看全部
-
屬性選擇器 實例展示： html代碼： <a href="xxx.pdf">我鏈接的是PDF文件</a> <a href="#" class="icon">我類名是icon</a> <a href="#" title="more">我的title是more</a> css代碼 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }查看全部
-
border-radius實現(xiàn)圓角 box-shadow實現(xiàn)陰影 偽元素與漸變實現(xiàn)分割線 :before{content""; width:1px; height:25px; position:absolute; top:15px; left:0; background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); } :after{ ...}查看全部
-
border-radius實現(xiàn)圓角 box-shadow實現(xiàn)陰影 偽元素與漸變實現(xiàn)分割線 :before{content""; width:1px; height:25px; position:absolute; top:15px; left:0; background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); } :after{ ...}查看全部
舉報
0/150
提交
取消