-
CSS3 結(jié)構(gòu)性偽類選擇器—not
:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：form?{ ??width:?200px; ??margin:?20px?auto; } div?{ ??margin-bottom:?20px; }input:not([type="submit"]){ ??border:1px?solid?red; }相關(guān)HTML代碼：
<form?action="#"> ??<div> ????<label?for="name">Text?Input:</label> ????<input?type="text"?name="name"?id="name"?placeholder="John?Smith"?/> ??</div> ??<div> ????<label?for="name">Password?Input:</label> ????<input?type="text"?name="name"?id="name"?placeholder="John?Smith"?/> ??</div> ??<div> ????<input?type="submit"?value="Submit"?/> ??</div> </form>
查看全部 -
CSS3 結(jié)構(gòu)性偽類選擇器—root
通過“:root”選擇器設(shè)置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>
CSS代碼：
:root?{ ??background:orange; } 演示結(jié)果：“:root”選擇器等同于<html>元素，簡單點(diǎn)說：:root{background:orange}html?{background:orange;}得到的效果等同。建議使用:root方法。另外在IE９以下還可以借助“:root”實(shí)現(xiàn)hack功能。查看全部 -
CSS3選擇器 屬性選擇器
在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎(chǔ)上對(duì)屬性選擇器進(jìn)行了擴(kuò)展，新增了3個(gè)屬性選擇器，使得屬性選擇器有了通配符的概念，這三個(gè)屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強(qiáng)大的屬性選擇器。
：
查看全部 -
CSS3背景 multiple backgrounds
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時(shí)為用逗號(hào)隔開的每組值；用分解寫法時(shí)，如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如background-repeat只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],..
注意：用逗號(hào)隔開每組 background 的縮寫值；如果有 size 值，需要緊跟 position 并且用 "/" 隔開；如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如 background-repeat 只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。background-color 只能設(shè)置一個(gè)。查看全部 -
CSS3背景 background-size
設(shè)置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對(duì)圖片進(jìn)行伸縮。
語法：
background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain
取值說明：
1、auto：默認(rèn)值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對(duì)出現(xiàn)如200px 50px，將背景圖片寬高依次設(shè)置為前面兩個(gè)值，當(dāng)設(shè)置一個(gè)值時(shí)，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個(gè)值時(shí)同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個(gè)容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
查看全部 -
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，設(shè)置一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
? text-align:center;
? position:relative;
? top:80px;
}
.box {
? width:70%;
? height:200px;
? background:#FFF;
? margin:40px auto;
}
.effect{
? position:relative;? ? ? ?
? ? -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
? ?-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
? ? content:"";
position:absolute;?
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
</style>
</head>
<body>
? <div class="box effect">
? <h3>Shadow Effect </h3>
</div>
</body>
</html>
查看全部 -
上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效。
查看全部 -
制作圓：
border-radius標(biāo)簽
制作導(dǎo)航立體風(fēng)格：
利用投影技術(shù)box-shadow
利用偽元素制作導(dǎo)航列表分隔線
查看全部 -
記住啦啦啦啦
查看全部 -
@
Keyframes被稱為關(guān)鍵幀，其類似于Flash中的關(guān)鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動(dòng)畫名稱加上一對(duì)花括號(hào)“{…}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則。經(jīng)驗(yàn)與技巧：在@keyframes中定義動(dòng)畫名稱時(shí)，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對(duì)應(yīng)的是from，100%對(duì)應(yīng)的是to。
Chrome?和?Safari?需要前綴?-webkit-；Foxfire?需要前綴?-moz-。
查看全部 -
任務(wù)二、設(shè)置縮略圖形狀
為什么要在a上加after 而不是li或者ul上加after
查看全部 -
設(shè)置縮略圖外形效果
提示：使用偽元素::after制作圓形效果
查看全部 -
給每個(gè)列表定義不同的背景顏色
提示：使用結(jié)構(gòu)偽類選擇器:nth-of-type()
查看全部 -
box-shadow是向盒子添加陰影。支持添加一個(gè)或者多個(gè)。
box-shadow:?X軸偏移量?Y軸偏移量?[陰影模糊半徑]?[陰影擴(kuò)展半徑]?[陰影顏色]?[投影方式];
參數(shù)介紹：
注意：inset 可以寫在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無效的。查看全部
舉報(bào)