先了解一下目前的幾種現代瀏覽器的核心，主流內容主要有

  Mozilla（Gecko）（熟悉的有Firefox，Flock等瀏覽器）-moz-

  WebKit（熟悉的有Safari、Chrome等瀏覽器）-webkit-

  Opera(presto)（Opera瀏覽器）-O-

  Trident（IE瀏覽器）-ms-

透明度

》css2中的透明度

filter: alpha(opacity=80);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

opacity: 0.8;

缺點 ：opacity後代元素會隨著一起具有透明性

》 css3中透明度可與顏色一起設定

rgba

R：紅色值。正整數 | 百分數

G：綠色值。正整數 | 百分數

B：藍色值。正整數| 百分數

A：透明度。取值0~1之間

在解決iE8-的相容問題上

.rgba {
  background: rgb(0,0,0);

  background: rgba(0, 0, 0,0.5);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)";    
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1

陰影

》text-shadow:  X-Offset  Y-Offset  blur   color;//文字陰影

相容性

相容IE的寫法

 元素 {filter:shadow(Color=顏色值,Direction=數值,Strength=數值)}
Color用於設定物件的陰影色；

Direction用於設定投影的主向，取值為0即零度（表示向上方向），45為右上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方；

Strength就是強度，類似於text-shadow中的blur值。

》box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

X-offset(必須):陰影水平偏移量，值為正值陰影在物件的右邊，反之陰影在物件的左邊；

Y-offset(必須):陰影垂直偏移量，值為正值陰影在物件的底部，反之陰影在物件的頂部；

陰影模糊半徑blur（可選）:只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴充套件半徑（可選）:值為正，則整個陰影都延展擴大，反之值則縮小

陰影顏色（可選）:各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此引數。

投影方式：預設為外投影，insert為內投影

相容性：

IE9-

法一：filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數值）, Strength=陰影半徑（數值）);
注：該濾鏡必須配合background屬性一起使用，否則該濾鏡失效

 $(document).ready(function(){
    if($.browser.msie) {
      $('.demo1').boxShadow(0,0,5,"#888"); //demo1元素使用了box-shadow
      $('.demo2').boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
    }
  });

陰影不會影響頁面的任何佈局，有時可替換border

》新增多個陰影：

如果新增多個陰影，只需用逗號隔開即可。如：

.box_shadow{ 4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

效果：

》Drop-shadow效果（firefox3.5+/chrome5+/safari5+/opera10.6+/Ie9+。）

 原理：僅用一個div標籤元素，然後配合其兩個偽元素":before"和":after"，然後分別給其偽元素定位到div的後面，並把box-shadow應用到這兩個偽元素上，同時利用transform的rotate對陰影進行旋轉

邊框背景

》border-image的語法：

repeat：就是一直重複，然後超出部分剪裁掉，而且是居中開始重複

Round：Round可以理解為圓滿的鋪滿。為了實現圓滿所以會壓縮

Stretch： 很好理解就是拉伸，有多長拉多長。有多遠“滾”多遠。

切割後的四周的八個切片，四個角根據border設定的大小全尺寸自動縮放顯示到border對應的四個角。

除四個角外的其他中間切片（上中，右中間，下中，左中間），可以根據設定做拉伸或重複的設定操作顯示到對應的border位置

圓角

常見的寫法

簡寫：

border-radius: 5px 4px 3px 2px;//分別為左上角，右上角，右下角，左下角，順時針轉

拆開寫：

border-top-left-radius: ；           //左上角

border-top-right-radius:     ；    //右上角

border-bottom-right-radius: ；//右下角

border-bottom-left-radius:   ； //左下角

 border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;“/”前是指圓角的水平半徑，而“/”後是指圓角的垂直半徑

等價於{

  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;

}

 相容性 

1、Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+

2、在img上應用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對圖片進行剪下

3、內半徑和外半徑的區別：當border-radius半徑值小於或等於border的厚度時，邊框內部就不具有圓角效果

4、table的樣式屬性border-collapse是collapse時,border-radius不能正常顯示,只有border-collapse: separate;時才能正常顯示。

顏色

語法：color：rgba(R,G,B,A)；background-color:rgba(r,g,b,a)；

R、G、B三個引數，正整數值的取值範圍為：0 - 255。百分數值的取值範圍為：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支援使用百分數值。A為透明度引數，取值在0~1之間，不可為負值。