邊框的css3樣式

1、圓角（border-radius）

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

設置或檢索對象使用圓角邊框。提供2個參數，2個參數以「/」分隔，每一個參數容許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等於第1個參數。

第一個參數的參數值對應角的關係以下：

• 一個參數時將用於所有的於四個角。
• 兩個參數時第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)
• 三個參數時第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。
• 四個參數將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序做用於四個角

圓角的半徑能夠細分爲垂直和水平兩個方向單獨設置：border-radius:10px 20px 30px 40px/5px 10px 15px 20px;

 

2、陰影（box-shadow）

box-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

none：無陰影
<length>①：第1個長度值用來設置對象的陰影水平偏移值。能夠爲負值
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。能夠爲負值
<length>③：若是提供了第3個長度值則用來設置對象的陰影模糊值。不容許負值
<length>④：若是提供了第4個長度值則用來設置對象的陰影外延值。能夠爲負值
<color>：設置對象的陰影的顏色。
inset：設置對象的陰影類型爲內陰影。該值爲空時，則對象的陰影類型爲外陰影

 

能夠設置多組陰影效果同時生效：

box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);

 

3、邊框圖片（border-image）
採用九宮格的方式裁剪圖片，來做爲邊框的背景圖片

語法：border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

說明

一、border-image-source：當值爲none時纔會顯示border-style。

二、border-image-slice：[ <number> | <percentage> ]{1,4} && fill?

圖片裁剪，一到四個參數，分別表明上右下左分別裁剪的位置。

裁剪方式爲九宮格——將圖像分紅4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字 fill，若是加上fill參數說明保留九宮格最中間的圖片，不加則最中間的圖片不顯示

一個參數：用於四條邊

兩個參數：第一個參數用於  上下  第二個參數用於右左

三個參數：第一個參數用於  上  第二個參數用於右左 第三個參數用於下

四個參數：上右下左分別對應四條變

三、border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}

該屬性用於指定使用多厚的邊框來承載被裁剪後的圖像。該屬性可省略，由外部的border-width來定義。

<length>：用長度值指定寬度。不容許負值。

<percentage>：用百分比指定寬度。參照border-image區域進行計算。不容許負值。

<number>：用浮點數指定寬度。不容許負值。

auto：若是auto值被設置，則border-image-width採用與border-image-slice相同的值。

四、border-image-outset：[ <length> | <number> ]{1,4}

該屬性用於指定邊框圖像向外擴展所定義的數值，即若是值爲10px，則圖像在本來的基礎上往外延展10px再顯示。

<length>：用長度值指定寬度。不容許負值。
<number>：用浮點數指定寬度。不容許負值。

五、border-image-repeat：[ stretch | repeat | round | space ]{1,2}

該屬性用於指定邊框背景圖的填充方式。可定義0-2個參數值，即水平和垂直方向。若是2個值相同，可合併成1個，表示水平和垂直方向都用相同的方式填充邊框背景圖；若是2個值都爲stretch，則可省略不寫。

stretch：指定用拉伸方式來填充邊框背景圖。repeat：指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，若是超過則被截斷。round：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好能夠鋪滿整個邊框。space：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好能夠鋪滿整個邊框。