[CSS3.0] CSS-邊框

border-radius屬性:

定義: 爲元素添加圓角邊框;
語法: border-radius: 1-4 length|% / 1-4 length|%;
JavaScript語法: object.style.borderRadius="5px";
詳細: border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性;
示例:
div {
    border:2px solid;
    border-radius:25px;
}

註釋：按此順序設置每一個 radius 的四個值。若是省略 bottom-left，則與 top-right 相同。若是省略 bottom-right，則與 top-left 相同。若是省略 top-right，則與 top-left 相同。

值	描述
length	定義圓角的形狀
%	以百分比定義圓角的形狀

box-shadow屬性:

定義: 給邊框添加一個或多個陰影
語法: box-shadow: h-shadow v-shadow blur spread color inset;
JavaScript語法: object.style.boxShadow="10px 10px 5px #888888"
詳細:
示例:
div {
    box-shadow: 10px 10px 5px #888888;
}

值	描述
h-shadow	必需. 水平陰影的位置. 容許負值
v-shadow	必需. 垂直陰影的位置. 容許負值
blur	可選. 模糊距離
spread	可選. 陰影的尺寸
color	可選. 陰影的顏色
inset	可選. 將外部陰影(outset)改成內部陰影

註釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每一個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

border-image屬性:

定義: 邊框設置爲圖片
語法: 
JavaScript語法: object.style.borderImage="url(border.png) 30 30 round"
詳細:
border-image 屬性是一個簡寫屬性，用於設置如下屬性：
    border-image-source
    border-image-slice
    border-image-width
    border-image-outset
    border-image-repeat
示例:
{
    border-image:url(border.png) 30 30 round;
}

值	描述
border-image-source	用在邊框的圖片的路徑
border-image-slice	圖片邊框向內偏移
border-image-width	圖片邊框的寬度
border_image-outset	邊框圖像區域超出邊框的量
border-image-repeat	圖像邊框是否超出邊框的量