css3將圖像設置為元素周圍的邊框的方法：首先創建一個HTML示例文件；然后在body中創建一些p元素；最后通過css3中的border-image屬性將圖像設置為元素周圍的邊框即可。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

在網頁設計過程中，使用css3圖像邊框屬性可以大大的提升網頁整體美觀效果，以及豐富頁面內容。那么css3中的圖像邊框屬性也就是border-image 屬性。

下面我們就通過具體的代碼示例，給大家介紹css3中border-image 屬性用法。

也就是將圖像指定為元素周圍的邊框。

代碼如下：

#borderimg1 {

width: 600px;

border: 15px solid transparent;

padding: 10px;

-webkit-border-image: url("/test/img/19.png") 30 round;

border-image: url("/test/img/19.png") 60 round;

}

#borderimg2 {

width: 600px;

border: 15px solid transparent;

padding: 10px;

-webkit-border-image: url("/test/img/19.png") 30 stretch;

}

border-image 邊框圖像屬性,將圖片規定為包圍 div 元素的邊框：

這里圖像的中間部分被重復以創建邊界。

這里圖像的中間部分被拉伸以創建邊界。

這里原始的圖片如下：

將此圖像按照要求指定為元素周圍的邊框，效果如下：

border-image屬性可以允許你將圖片或CSS漸變形狀作為一個元素的邊框。

border-image 屬性是一個簡寫屬性，用于設置以下屬性：border-image-source /*用于指定要用于繪制邊框的圖像的位置*/

border-image-slice /*圖像邊界向內偏移*/

border-image-width /*圖像邊界的寬度*/

border-image-outset /*用于指定在邊框外部繪制 border-image-area 的量*/

border-image-repeat /*用于設置圖像邊界是否應重復(repeat)、拉伸(stretch)或鋪滿(round)。*/

推薦學習：《CSS3教程》

本篇文章就是關于用css3屬性將圖像指定為元素周圍的邊框的方法介紹，也是非常簡單易懂的，希望對需要的朋友有所幫助。

總結

以上是生活随笔為你收集整理的html图片与周围元素边界5px,css3如何将图像设置为元素周围的边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。