css3邊框線border

邊框（border）

在網頁中我們最常見的一種css3樣式莫過於邊框圓角了，邊框圓角是的網頁整體更加美觀，我們當然想要我們的頁面更加的美觀，所以我們一起來看看這個屬性。

	border-radius: 5px;

我們設置邊框圓角值爲5px，如上圖所示，當然這個只是一個簡寫的方法

	border-radius: 5px 10px;

這樣的寫法就是代表着左上和右下爲5px，右上和左下的爲10px，當然這樣還是簡寫，再次還原看看

	border-radius: 5px 10px 20px 30px;

這樣的寫法分別設置了四個角的不同的弧度，也可以分開設置每個小的弧度。

	border-top-left-radius：5px
	左上角的邊框圓角
	border-top-right-radius：5px
	右上角的邊框圓角
	border-bottom-left-radius：5px
	左下角的邊框圓角
	border-bottom-right-radius：5px
	右下角的邊框圓角

最原始的寫法

	border-radius：10px 20px 30px 40px / 20px 20px 30px 40px

此時四個角的邊框圓角分別爲：10px,20px 20px,20px 30px,30px 40px,40px

邊框陰影（box-shadow）

//box-shadow: h v blur spread color;
box-shadow: inset 3px 3px 5px 0px #000;

spread:陰影外延值 正值四周放大 負值四周收縮
blur：以當前陰影的邊框進行內外模糊不寫就是outset，

• inset 內陰影
• outset 外陰影；默認值不設置，設置後失效。
• 可以設置多層陰影

邊框圖片（border-image）

border-image-source
設置邊框圖片路徑
border-iamge-slice
設置邊框圖片切割的位置
border-image-slice: 25% 30% 12% 20% fill;

圖中1，2，3，4所切割出來的圖像分別對應着元素的四個角；5，6，7，8所切割的圖像分別對應着四個方向的border；fill關鍵字非必填，填寫則代表元素的content的背景圖像爲被切割的9。

設置圖片平鋪的效果（border-image-repeat）

stretch：拉伸
round：環繞式拉伸
repeat：平鋪 不會拉伸背景圖，見縫插針
space：平鋪 不會拉伸圖片，使用空白位置代替

複合語法

// border-iamge：source slice repeat
border-image: url(image.png) 100 round;