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

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

屬性名稱

border-radius(圓弧邊框):border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

border-image(圖形邊框):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)

  • 圖片來源(border-image-source):(網址);沒有瀏覽器支援單獨語法。
  • 切割範圍(border-image-slice):(數值)、(百分比);指定四個角落的圖片是由原始圖片的上、右、下、左切割成九個區域;沒有瀏覽器支援單獨語法。
  • 圖片寬度(border-image-width):(數值)、(百分比);指定圖片的寬度;沒有瀏覽器支援單獨語法。
  • 超界幅度(border-image-outset):(長度)、(數值);原始圖片超出邊框範圍的程度;沒有瀏覽器支援單獨語法。
  • 圖片重覆(border-image-repeat):stretch(把圖片拉大至整塊區域)、repeat(重覆填滿)、round(重覆填滿並自動調整圖像);沒有瀏覽器支援單獨語法。

【範例】

.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 使用的語法 */
}

【結果】

border-radius

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

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

【範例】

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

【結果】