1、css3文本效果：
1）文本屬性
1.1）text-shadow:5px 5px 5px #f66;
指定多個(gè)陰影：(參數(shù)形式為X坐標(biāo) Y坐標(biāo) 陰影顏色)
text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
1.2）word-break:使用該屬性自己決定自動(dòng)換行的處理方法，通過對其的指定，不僅僅可以讓瀏覽器實(shí)現(xiàn)半角空格或連字符后面的換行，而且可以讓瀏覽器實(shí)現(xiàn)任意位置的換行趁怔。參數(shù)可以為normal/keep-all/break-all
normal:使用瀏覽器默認(rèn)換行規(guī)則
keep-all:只能在半角空格或連接字符處換行
break-all:允許在單詞內(nèi)換行（對于標(biāo)點(diǎn)符號(hào)來說，允許標(biāo)點(diǎn)符號(hào)位于行首，不過在IE中是不可以的）
1.2）word-wrap：讓長單詞與URL地址自動(dòng)換行
eg:<p class="test">This paragraph contains a very long word:
thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.</p>
p.test
{
width:11em;
border:1px solid #000000;
/*讓長單詞與url地址自動(dòng)換行*/
word-wrap:break-word;
}
疑問：中文是否可以
2碎税、使用服務(wù)端字體
2.1）在網(wǎng)頁上顯示服務(wù)端字體
在CSS3中，使用@font-face屬性來利用服務(wù)端的字體
用法：
@font-face{
font-family:WebFont;
src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype");
font-weight:normal;
}
//WebFont用來聲明使用服務(wù)端的字體馏锡。
//format用來聲明字體文件的格式雷蹂，可以省略文件格式的聲明而單獨(dú)使用src屬性值。
疑問：字體文件的格式有哪些（OpenType與TrueType,前者的屬性值為opentype杯道，
后者的屬性值為truetype匪煌；前者的文件擴(kuò)展名為.otf，后者的為.ttf）
注：在IE中使用時(shí)党巾，只能使用微軟自帶的Embedded OpenType字體文件萎庭，
擴(kuò)展名為.eot，同時(shí)不需要使用format屬性值齿拂，用法如下
@font-face{font-family:BorderWeb;
src:url(BORDERW0.eot);
}
在項(xiàng)目文件夾中的fonts文件內(nèi)容分別包括粗體驳规、斜體、粗斜體署海、小型大寫字體
3吗购、與背景和邊框相關(guān)樣式
1）與背景相關(guān)的新增屬性
background-clip 指定背景的顯示范圍 border padding content
background-origin 指定繪制背景圖像時(shí)的起點(diǎn)
background-size 指定背景中圖像的尺寸
background-break 指定內(nèi)聯(lián)元素的背景圖像進(jìn)行平鋪時(shí)的循環(huán)方式医男，瀏覽器支持不友好，
暫時(shí)不需要了解
注：兼容性巩搏，需要在前面加相關(guān)瀏覽器內(nèi)核的標(biāo)志
1.1）background-clip
熟悉概念：在HTML頁面中昨登，一個(gè)具有背景的元素通常由元素的內(nèi)容，內(nèi)部補(bǔ)白（padding）贯底，
邊框丰辣，外部補(bǔ)白（margin）構(gòu)成（ppt page12）
定義3個(gè)div，添加文字禽捆，然后分別設(shè)定為border padding content看效果
1.2）background-origin
1.3）background-size 設(shè)定為自己想要的尺寸笙什，如果需要保持尺寸一致時(shí)，
將另一個(gè)設(shè)為auto
1.4）background-break
2）在一個(gè)元素中添加多張背景圖片
div{
background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 3% 98%,85%, center center, top;
width: 300px;
padding: 90px 0px;
}
注：第一個(gè)定義的背景圖片在最上面的胚想，最后定義的是在最下面的琐凭。使用background-repeat和background-position可以單獨(dú)指定背景圖像中某個(gè)文件的平鋪方式與放置的位置
4、border-raidus的用法
div{width:150px;height:150px;margin-bottom: 10px;margin:20px auto;border:1px solid #f66;}
#div1{border-radius: 10px;}
#div2{border-radius: 10px 20px;}/第一個(gè)值表示左上角浊服、右下角统屈；第二個(gè)值表示右上角、左下角牙躺。/
#div3{border-radius: 10px 20px 30px;}/第一個(gè)值表示左上角愁憔；第二個(gè)值表示右上角、左下角孽拷；第三個(gè)值表示右下角吨掌。/
#div4{border-radius:10px 20px 30px 40px/20px 50px 30px 10px;}
/創(chuàng)建不對稱的角–橢圓角,斜杠前面的一組四個(gè)值分別表示四個(gè)角的水平半徑；
斜杠后面的一組四個(gè)值分別表示四個(gè)角的垂直半徑/
5脓恕、漸變背景色
/* Webkit語法膜宋，
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>])
/ 實(shí)際用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background: -webkit-linear-gradient(top,#fff,#000);
background: -webkit-radial-gradient(50% 50%,#fff,#000);
不要擔(dān)心這些語法會(huì)讓你看花眼，我也是這樣的炼幔！只要記得我們需要用一個(gè)逗號(hào)來隔開這個(gè)參數(shù)組秋茫。
漸變的類型? (linear)（radial徑向漸變）
漸變開始的X Y 軸坐標(biāo)(0 0 – 或者left-top)
漸變結(jié)束的X Y 軸坐標(biāo)(0 100% 或者left-bottom)
開始的顏色? (from(red))
結(jié)束的顏色? (to(blue))
/* Mozilla語法， -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
/* 實(shí)際用法*/
background: -moz-linear-gradient(top, red, blue);
請注意我們將漸變的類型——linear——放到了屬性前綴中了
漸變從哪里開始? (top – 我們也可以使用度數(shù)乃秀，比如-45deg)
開始的顏色? (red)
結(jié)束的顏色? (blue)
疑問：1）不要結(jié)束到100%呢：
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
background: -moz-linear-gradient(top, red, blue 8
2）IE支持嗎肛著？
IE并不支持CSS漸變，但是提供了漸變?yōu)V鏡环形，可以實(shí)現(xiàn)最簡單的漸變效果
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
總結(jié)：看下面這種簡單的理解
一. Webkit瀏覽器
(1) 第一種寫法：
background:-webkit-gradient(linear ,10% 10%，100% 100%衙傀，
color-stop(0.14,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)) );
第一個(gè)參數(shù)：表示的是漸變的類型
linear線性漸變
第二個(gè)參數(shù)：分別對應(yīng)x抬吟，y方向漸變的起始位置
第三個(gè)參數(shù)：分別對應(yīng)x，y方向漸變的終止位置
第四/五/N個(gè)參數(shù)：設(shè)置漸變的位置及顏色
(2)第二種寫法：這種寫法比較簡單统抬，而且效果比較自然
background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
第一個(gè)參數(shù)：表示的是漸變的類型
linear線性漸變
第二個(gè)參數(shù)：分別對應(yīng)x火本，y方向漸變的起始位置
第三個(gè)參數(shù)：分別對應(yīng)x危队，y方向漸變的終止位置
第四個(gè)參數(shù)：設(shè)置了起始位置的顏色
第五個(gè)參數(shù)：設(shè)置了終止位置的顏色
二.Mozilla瀏覽器
(1)第一種寫法：
background:-moz-linear-gradient(10 10 90deg,
rgb(25,0,0) 14%,
rgb(255,255,0) 50%,
rgb(0,0,255) 100%);
第一個(gè)參數(shù)：設(shè)置漸變起始位置及角度
第二/三/四/N個(gè)參數(shù)：設(shè)置漸變的顏色和位置
(2)第二種寫法：這種寫法比較簡單，而且效果比較自然
background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);
第一個(gè)參數(shù)：設(shè)置漸變的起始位置
第二個(gè)參數(shù)：設(shè)置起始位置的顏色
第三個(gè)參數(shù)：設(shè)置終止位置的顏色
三.IE 瀏覽器
IE瀏覽器實(shí)現(xiàn)漸變只能使用IE自己的濾鏡去實(shí)現(xiàn)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一個(gè)參數(shù)：漸變起始位置的顏色
第二個(gè)參數(shù)：漸變終止位置的顏色
第三個(gè)參數(shù)：漸變的類型
0 代表豎向漸變 1 代表橫向漸變
P.S.這里設(shè)置背景的時(shí)候不需要給background設(shè)置钙畔，直接用filter即可茫陆，不要和其他的瀏覽器混淆
6、使用圖像邊框
1）border-image:
代碼在指定div元素的寬度中
語法：
border-image:url("url") A B C D/border-width
border-image 中必須至少指定5個(gè)參數(shù)擎析，
第一個(gè)參數(shù)作為邊框使用圖像的路徑簿盅，
后4個(gè)參數(shù)表示當(dāng)瀏覽器自動(dòng)吧邊框所使用到的圖像進(jìn)行分隔時(shí)的上邊距，右邊距揍魂，下邊距桨醋，左邊距
border-width:表示邊框的寬度
border-image: url(borderimage.png) 25 25 25 25/5px stretch;
參考：http://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/