-
1、具體來(lái)說(shuō)，觸發(fā)元素的URL中的標(biāo)志符通常會(huì)包含一個(gè)#號(hào)，后面帶有一個(gè)標(biāo)志符名稱，上面代碼中是：#brand
2、：target就是用來(lái)匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個(gè)div元素。查看全部 -
匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
“:root”選擇器等同于<html>元素，簡(jiǎn)單點(diǎn)說(shuō)：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建議使用:root方法。查看全部 -
multiple backgrounds
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
;
意：
用逗號(hào)隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如 background-repeat 只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。
background-color 只能設(shè)置一個(gè)。查看全部 -
background-size: auto | <長(zhǎng)度值> | <百分比> | cover | contain
1、auto：默認(rèn)值，不改變背景圖片的原始高度和寬度；
2、<長(zhǎng)度值>：成對(duì)出現(xiàn)如200px 50px，將背景圖片寬高依次設(shè)置為前面兩個(gè)值，當(dāng)設(shè)置一個(gè)值時(shí)，將其作為圖片寬度值來(lái)等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個(gè)值時(shí)同上；
4、cover：覆蓋，即將背景圖片等比縮放以填滿整個(gè)容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。查看全部 -
background-clip
用來(lái)將背景圖片做適當(dāng)?shù)牟眉?br />background-clip ： border-box | padding-box | content-box | no-clip
參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。backgroud-clip默認(rèn)值為border-box。查看全部 -
設(shè)置元素背景圖片的原始起始位置background-origin ： border-box | padding-box | content-box;
參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值），或者是內(nèi)容區(qū)域開始顯示。
背景no-repeat有效查看全部 -
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值為正值時(shí)陰影向右偏移，反之向左偏移；?????
Y-Offset：陰影的垂直偏移距離，正值下偏移，負(fù)值上偏移；
Blur：是指陰影的模糊程度，其值不能是負(fù)值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設(shè)置為0；
Color：是指陰影的顏色，其可以使用rgba色。查看全部 -
@font-face能夠加載服務(wù)器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒(méi)有安裝的字體。
@font-face {
??? font-family : 字體名稱;
??? src : 字體文件在服務(wù)器上的相對(duì)或絕對(duì)路徑;
}
這樣設(shè)置之后，就可以像使用普通字體一樣在（font-*）中設(shè)置字體樣式。查看全部 -
CSS3文字與字體 text-overflow 與 word-wrap
text-overflow用來(lái)設(shè)置是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出。查看全部 -
color：rgba(R,G,B,A)
background-color:rgba(100,120,60,0.5);
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)
第一個(gè)參數(shù):指定漸變方向
第二個(gè)和第三個(gè)參數(shù)，表示顏色的起始點(diǎn)和結(jié)束點(diǎn)，可以有多個(gè)顏色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);查看全部 -
border-image查看全部
-
X軸偏移量為正數(shù)，陰影位置顯示在右下角，如果值為負(fù)數(shù)則顯示在左下角
Y軸偏移值為正數(shù)，陰影位置顯示在右下角，如果值為負(fù)數(shù)則顯示在右上查看全部 -
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
.box_shadow{
? box-shadow:4px 2px 6px #333333 inset; 內(nèi)陰影
}
添加多個(gè)陰影，只需用逗號(hào)隔開
.box_shadow{
??? box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
X軸偏移量和Y軸偏移量值可以設(shè)置為負(fù)數(shù)查看全部 -
圓角，圖片邊框，文字陰影和盒陰影，過(guò)渡、動(dòng)畫等border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角，順時(shí)針 */
實(shí)心圓
div{
??? height:100px;/*與width設(shè)置一致*/
??? width:100px;
??? background:#9da;
??? border-radius:50px;/*四個(gè)圓角值都設(shè)置為寬度或高度值的一半*/
??? }
實(shí)心上半圓
div{
??? height:50px;/*是width的一半*/
??? width:100px;
??? background:#9da;
??? border-radius:50px 50px 0 0;/*半徑至少設(shè)置為height的值*/
??? }查看全部 -
在編寫CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分，是瀏覽器的私有屬性，
webkit? chrome和safari
-moz?? firefox
-ms??? IE
-o? opera查看全部
舉報(bào)
0/150
提交
取消