邊框樣式：
1. border-width
邊框寬度：
div { width:200px; height:200px; border-style:solid; border-width:5px; ｝
/*border-top-width 設置上邊框寬度
border-bottom-width 設置下邊框寬度
border-left-width 設置左邊框寬度
border-right-width 設置右邊框寬度*/
2. border-color
邊框顏色:
div { width:200px; height:200px; border-style:solid; border-width:5px; border-color:red;｝
/*border-top-color 設置上邊框顏色
border-bottom-color 設置下邊框顏色
border-left-color 設置左邊框顏色
border-right-color 設置右邊框顏色*/
3. border-style
邊框線：
div { width:300px; height:100px; border-style:solid; ｝
邊框線屬性值有：
none（無輪廓）
hidden（隱藏邊框。IE7及以下尚不支持）
dotted（點狀輪廓。IE6下顯示為dashed效果）
dashed（虛線輪廓）
solid（實線輪廓）
double（雙線輪廓）
groove（3D凹槽輪廓）
ridge （3D凸槽輪廓）
inset（3D凹邊輪廓）
outset（3D凸邊輪廓）
4. border
邊框：
可以將以上面三個樣式border-width 、border-style 、 border-color 縮寫：
div {
width:200px;
height:200px;
border:1px solid #FF0000;
}
5. border-radius
圓角：
/* 所有角都使用半徑為10px的圓角 */ div{ border-radius:10px;} /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ div{ border-radius: 5px 4px 3px 2px; } /*也可以分別設置每個角的垂直半徑和水平半徑,用斜杠隔開，第一個參數表示左上角開始順時針的水平半徑，第二個參數表示左上角開始順時針的垂直半徑*/ div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; } /*圓*/ div{ border-radius:50% }
/*半圓*/
div{
width: 200px;
height: 100px;
border-style: solid;
border-color:red;
border-width:5px;
border-radius: 100px 100px 0 0 ;
}
半圓效果如下：
6. border-image
邊框圖片：
div { border: 10px solid gray; border-image: url(1.png) 10/10px; }
/*
<' border-image-source '>：設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。
<' border-image-slice '>：設置或檢索對象的邊框背景圖的分割方式。
<' border-image-width '>：設置或檢索對象的邊框厚度。
<' border-image-outset '>：設置或檢索對象的邊框背景圖的擴展。
<' border-image-repeat '>：設置或檢索對象的邊框圖像的平鋪方式。
*/
7. box-shadow（盒子陰影）
使用方法：
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } /*外陰影常規效果*/
.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外陰影模糊外延效果*/
. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } /*內陰影效果*/
段落樣式：
1. line-height（行高）
p { line-height:25px;}
p { line-height:150%}
2. text-indent（段落縮進）
p { text-indent:2em;} /*首行縮進個2個字符*/
3. text-align：
p { text-align:right;}
p { text-align:center;}
屬性值有：
left（內容左對齊）
center（內容居中對齊）
right （內容右對齊）
justify （內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。）
4. letter-spacing（文字間距）
p { letter-spacing:5px;}/*每個文字與文字之間的距離是5px*/
5. text-overflow（文字溢出）
text-overflow只是用來說明文字溢出時用什么方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果。
div,input{ overflow: hidden; /*條件1：超出部分隱藏*/ white-space: nowrap;/*條件2：強制在同一行內顯示所有文本*/ text-overflow: ellipsis;/*超出部分顯示。。。*/ }
6. word-wrap（段落換行）
normal 允許內容頂開或溢出指定的容器邊界。
break-word 內容將在邊界內換行。如果需要，單詞內部允許斷行。
p { word-wrap: break-word; }
背景樣式：
1. background-color（背景顏色）
body { background-color:#CCCCCC;}
2. rgba
RGB是一種色彩標准，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的 顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。
語法：
color：rgba(R,G,B,A)以上R、G、B三個參數，正整數值的取值范圍為：0 - 255。百分數值的 取值范圍為：0.0% - 100.0%。超出范圍的數值將被截至其最接近的取值極限。並非所有瀏覽 器都支持使用百分數值。A為透明度參數，取值在0~1之間，不可為負值。
border-color:rgba(255 , 0 , 0 , .7); /*.7是alpha透明度為70%的意思*/ background-color:rgba( 100 , 120 , 60 , .5 ); border-color:rgba(255 , 0 , 0 , .7);
3. linear-gradient（漸變色彩）
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。
由於不同的渲染引擎實現漸變的語法不同，這里我們只針對線性漸變的 W3C 標准語法來分析其用法，其余大家可以查閱相關資料。
W3C 語法已經得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
background-image:linear-gradient(to left, red 30%,blue);
4. background-image（背景圖片）
body { background-image:url(images/bg.gif);}
5. background-repeat（背景平鋪方式）
body { background-repeat:no-repeat;}/*背景圖像不平鋪*/
屬性值：
repeat-x：背景圖像在橫向上平鋪
repeat-y：背景圖像在縱向上平鋪
repeat：背景圖像在橫向和縱向平鋪
no-repeat：背景圖像不平鋪
round：背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）
space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
6. background-position（背景定位）
body { background-position:left bottom;}
body { background-position:30% 20px;}
7. background
背景樣式縮寫
.nav { background:#red url(images/icon.jpg) no-repeat left 0px;
/*背景顏色為紅色，要定位的背景圖像的路徑，背景圖像不平鋪，定位在左邊然后上邊為0px的位子。*/
}