- 摩刻部落 - https://www.moke.tw/wordpress -

CSS3與濾境(6)-特殊邊框

相關語法請參考:「CSS排版程式(5)-模組方塊設計 [1]

屬性名稱

border-radius [2](圓弧邊框):border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius
border-image [3](圖形邊框):border-image-outset、border-image-repeat、border-image-slice、border-image-source、border-image-width

border-image
說明:使用圖片來作為邊框。

屬性值:(border-image-source) (border-image-slice) (border-image-width) (border-image-outset) (border-image-repeat)

【範例】

.box {
	width:100px;
	height:30px;
	border-width:10px;	/* 邊框寬度,影響邊框圖片大小 */
	border-image:url(https://lh5.googleusercontent.com/-Z-RZzmSrReI/Tem3ZpIFggI/AAAAAAAAClY/YeRlw6WZFHc/border.gif) 20 21 round;		/* 不支援IE8以前瀏覽器 */
	-moz-border-image:url(https://lh5.googleusercontent.com/-Z-RZzmSrReI/Tem3ZpIFggI/AAAAAAAAClY/YeRlw6WZFHc/border.gif) 20 21 round;	/* Firefox 使用的語法 */
	-webkit-border-image:url(https://lh5.googleusercontent.com/-Z-RZzmSrReI/Tem3ZpIFggI/AAAAAAAAClY/YeRlw6WZFHc/border.gif) 20 21 round;	/* Chrome、Safari 使用的語法 */
}

【結果】

回到【屬性名稱】 [4]

border-radius
說明:將方塊的邊緣修改成圓弧狀,並且可以指定圓弧的程度。

屬性值:(長度)、(百分比)

【範例】

.box {
	border:1px solid;
	border-radius:25px;		/* 不支援IE8以前瀏覽器 */
	-moz-border-radius:25px;	/* Firefox 使用的語法 */
}

【結果】

回到【屬性名稱】 [4]