圓角效果 border-radius

border-radius是向元素新增圓角邊框。
使用方法：

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */ 

border-radius: 5px 4px 3px 2px; 
/* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ 

不要以為border-radius的值只能用px單位，你還可以用百分比或者em，但相容性目前還不太好。

實心上半圓：
方法：把高度(height)設為寬度（width）的一半，並且只設置左上角和右上角的半徑與元素的高度一致（大於也是可以的）。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半徑至少設定為height的值*/
    }
 

實心圓：
方法：把寬度（width）與高度(height)值設定為一致（也就是正方形），並且四個圓角值都設定為它們值的一半。如下程式碼：

div{
    height:100px;/*與width設定一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四個圓角值都設定為寬度或高度值的一半*/
    }

陰影 box-shadow（一）

box-shadow是向盒子新增陰影。支援新增一個或者多個。
很簡單的一段程式碼，就實現了投影效果，酷斃了。我們來看下語法：

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

注意：inset 可以寫在引數的第一個或最後一個，其它位置是無效的。

為元素設定外陰影：
示例程式碼：

.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}

效果：

為元素設定內陰影：
示例程式碼：

.box_shadow{   box-shadow:4px 2px 6px #333333 inset;  }

效果：

新增多個陰影：
以上的語法的介紹，就這麼簡單，如果新增多個陰影，只需用逗號隔開即可。如：

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

效果：

陰影 box-shadow（二）

1、陰影模糊半徑與陰影擴充套件半徑的區別

• 陰影模糊半徑：此引數可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
• 陰影擴充套件半徑：此引數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

2、X軸偏移量和Y軸偏移量值可以設定為負數
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
X軸偏移量為負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666;
}

效果圖：

Y軸偏移量為負數：

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666;
}

效果圖：

為邊框應用圖片 border-image

顧名思義就是為邊框應用背景圖片，它和我們常用的background屬性比較相似。例如：

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景圖片複雜一些。
想象一下：一個矩形，有四個邊框。如果應用了邊框圖片，圖片該怎麼分佈呢？ 圖片會自動被切割分成四等分。用於四個邊框。

可以理解為它是一個切片工具，會自動把用做邊框的圖片切割。怎麼切割呢？為了方便理解，做了一張特殊的圖片，由9個矩形（7070畫素）拼成的一張圖（210210畫素），並標註好序號，是不是像傳說中的九宮圖，如下：

我們把上圖當作邊框圖片 來應用一下， 看一看是什麼效果
根據border-image的語法：

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

效果：

從序號可以看出div的四個角分別對應了背景圖片的四個角。而2,4,6,8 被重複。5在哪？因為是從四周向中心切割圖片的所以，5顯示不出來。而在chrome瀏覽器中5是存在的，下圖的樣子：

repeat的意思就是重複，目前因為是剛好被整除，效果看不出來。如果改下DIV的寬高，再來看重複的效果：

邊角部分為裁掉了，可見repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複。
Round 引數：Round可以理解為圓滿的鋪滿。為了實現圓滿所以會壓縮（或拉伸）；

#border-image {

     width:170px;

     height:170px;

     border:70px solid;

     border-image:url(borderimg.png) 70 round;

 }

效果：

可見圖片被壓扁了。
Stretch 很好理解就是拉伸，有多長拉多長。有多遠“滾”多遠。
border-image:url(borderimg.png) 70 stretch
看一下效果：

2,4,6,8分別被拉伸顯示。
注意：Chrome下，中間部分也會被拉伸，webkit瀏覽器對於round屬性和repeat屬性似乎沒有區分，顯示效果是一樣的。
Firefox 26.0 下是可以準確區分的。