文字相關(guān)樣式
顏色 (Color)
透明度：
opacity: 0.1;
opacity: 0.5;
opacity: 0.9;
RGBA：
color: rgba(255, 0, 0, 0.6);
注意: RGBA是在RGB的基礎(chǔ)上多了控制alpha透明度的參數(shù)。
文本陰影
語法:
text-shadow:
h-shadow(必需。水平陰影的位置。允許負(fù)值)
v-shadow (必需。垂直陰影的位置。允許負(fù)值)
blur(可選。模糊的距離。)
color(可選。陰影的顏色);
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
CSS3 @font-face 規(guī)則
在 CSS3 之前，web 設(shè)計師必須使用已在用戶計算機上安裝好的字體。
通過 CSS3，web 設(shè)計師可以使用他們喜歡的任意字體。
當(dāng)您您找到希望使用的字體時，可將該字體文件存放到 web 服務(wù)器上，它會在需要時被自動下載到用戶的計算機上。您“自己的”的字體是在 CSS3 @font-face 規(guī)則中定義的
firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 @font-face 規(guī)則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
使用您需要的字體
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<style>
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>
邊框樣式
圓角邊框 (Border)
語法
border-radius: length/% ;
border-radius: 一個值； //四個角都一樣
border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角
border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角
border-radius: 值1 值2 值3 值4；//左上角、右上角、右下角、左下角
CSS3 邊框陰影
在 CSS3 中，box-shadow 用于向方框添加陰影：
語法 :
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
參數(shù) :
div{
box-shadow: 10px 10px 5px #888888;
}
CSS3 邊框圖片
通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框：
使用圖片創(chuàng)建圍繞 div 元素的邊框：
div{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 hrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */}
圖片地址border-image-source：url();
圖片切片border-image-slice{1，4}
1、頂部內(nèi)偏移區(qū)域27px處橫切一刀
2、接著距離右側(cè)內(nèi)偏移區(qū)域27px豎切一刀
3、緊接著距離底部內(nèi)偏移區(qū)域27px橫切一刀
4、接著距離左側(cè)內(nèi)偏移區(qū)域27px豎切一刀
邊框圖片寬度border-image-width
邊框圖片外凸border-image-outset (x,y)
邊框圖片重復(fù)border-image-repeat
多重背景
CSS3 多重背景圖片
CSS3 允許您為元素使用多個背景圖像。
為 body 元素設(shè)置兩幅背景圖片：
body{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
背景漸變
漸變 (Gradients) ——線性漸變
background: linear-gradient(angle,顏色 0%,顏色 50% ,顏色 100%)
通過角度來確定漸變的方向。
后邊的參數(shù)，表示漸變的顏色和位置。可以插入更多的顏色值。
可以用rgba產(chǎn)生漸隱效果
angle: left,right,top,buttom,30deg
repeating-linear-gradient 重復(fù)漸變
漸變 (Gradients) ——徑向漸變
background: radial-gradient(顏色 0%,顏色 50% 顏色 100%)
<position>：主要用來定義徑向漸變的圓心位置。
length：用長度值指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)。可以為負(fù)值。
percentage：用百分比指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)。可以為負(fù)值。
left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。
center：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。
right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。
top：設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。
bottom：設(shè)置底部為徑向漸變圓心的縱標(biāo)值。
<shape>：主要用來定義徑向漸變的形狀。
circle：如果<size>和<length>大小相等，那么徑向漸變是一個圓形，也就是用來指定圓形的徑向漸變
ellipse：如果<size>和<length>大小不相等，那么徑向漸變是一個橢圓形，也就是用來指定橢圓形的徑向漸變。
<size>：主要用來確定徑向漸變的結(jié)束形狀大小。
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角；
塊級元素居中
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
2.已知寬度和高度
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
position:absolute;
left:50%;
top:50%;
