border-radius是向元素新增圓角邊框。
【使用方法】
border-radius
:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
* border-radius的值只能用px單位，你還可以用百分比或者em，但相容性目前還不太好。
【例如】
div
【例如】
div
box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑]
[陰影擴充套件半徑]
[陰影顏色]
[投影方式];
注意：inset 可以寫在引數的第乙個或最後乙個，其它位置是無效的。省略長度的值是 0。
如果新增多個陰影，只需用逗號隔開即可。如：
【陰影模糊半徑】
（可選）其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊。
【陰影擴充套件半徑】
（可選）其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小。
(1) x軸偏移量為負數
(2) y軸偏移量為負數
為邊框應用背景，它和我們常用的background屬性比較相似。但是又比背景複雜一些。
例如：
可以理解為它是乙個切片工具，會自動把用做邊框的切割。怎麼切割呢？為了方便理解，做了一張特殊的，由9個矩形（70*70畫素）拼成的一張圖（210*210畫素），並標註好序號，是不是像傳說中的九宮圖，如下：
我們把上圖當作邊框來應用一下， 看一看是什麼效果？
根據border-image的語法：
從序號可以看出div的四個角分別對應了背景的四個角。而2,4,6,8 被重複。5在哪？因為是從四周向中心切割的所以，5顯示不出來。而在chrome瀏覽器中5是存在的，下圖的樣子：
repeat的意思就是重複，目前因為是剛好被整除，效果看不出來。如果改下div的寬高，再來看重複的效果：（邊角部分為裁掉了，可見repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複）
round是圓滿的鋪滿。為了實現圓滿所以會壓縮（或拉伸）
#border-image
可見被壓扁了。
stretch很好理解就是拉伸，有多長拉多長。有多遠「滾」多遠。
border-image
:url(borderimg
.png) 70 stretch;
【注意】chrome下，中間部分也會被拉伸，webkit瀏覽器對於round屬性和repeat屬性似乎沒有區分，顯示效果是一樣的。firefox 26.0 下是可以準確區分的。
CSS3 布局樣式相關 慕課網 學習總結
w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上經常使用。columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。要顯示3欄顯示，每欄寬度為150px，為 class...
CSS3 文字與字型 慕課網 學習總結
text overflow用來設定是否使用乙個省略標記 標示物件內文字的溢位。text overflow只是用來說明文字溢位時用什麼方式顯示，要實現溢位時產生省略號的效果，還須定義強制文字在一行內顯示 white space nowrap 及溢位內容為隱藏 overflow hidden 如下 te...
CSS 3學習 邊框
在css 3中可以設定邊框圓角 邊框陰影和邊框影象，分別通過border radius border image和box shadow屬性設定。border radius屬性是以下4個屬性的簡寫 border top left radius 設定左上角的圓角 border top right rad...