css怎麼設定圖片邊框-css教學-PHP中文網

首頁

web前端

css教學

css怎麼設定圖片邊框

青灯夜游

Apr 29, 2021 pm 02:24 PM

css 圖片邊框

在css中，可以使用border-image屬性設定圖片邊框，只需要給元素新增「border-image:圖片路徑切割寬度平鋪方式;」樣式即可。 border-image屬性可以為邊框新增背景圖片，實現圖片邊框效果。

css怎麼設定圖片邊框

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

在CSS入門階段，我們學習了border-style屬性，也知道邊框只有實線、虛線等幾種簡單的樣式。如果我們想要為邊框添加漂亮的背景圖片，該怎麼做呢？

在CSS3中，我們可以使用border-image屬性為邊框新增背景圖片。現在所有主流瀏覽器最新版本都支援border-image屬性。

語法：

css怎麼設定圖片邊框

#說明：

border-image屬性需要定義3個方面的內容。

（1）圖片路徑。

（2）切割寬度：四邊的切割寬度，依序為上邊、右邊、下邊、左邊（順時針）。

（3）平鋪方式：有3種取值，分別為repeat、round和stretch。

在本節所有範例中，我們都是使用圖所示的這張90px×90px的圖片作為邊框的背景圖片。

css怎麼設定圖片邊框

程式碼範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

登入後複製

瀏覽器預覽效果如下圖所示。

css怎麼設定圖片邊框

分析：

從預覽效果我們可以知道，位於4角的數字1、3、7、9還是乖乖地位於4個角落。然後4條邊框的2、4、6、8會不斷地平鋪。

對於border-image屬性，我們總結如下:

（1）在製作邊框背景圖片時，應該製作4條邊，中間部分需要挖空。

（2）邊框背景圖片每條邊的寬度跟對應的邊框寬度（即border-width）應該相同。

範例：平鋪方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:170px;
            height:110px;
            line-height:110px;
            text-align: center;
            border:30px solid gray;
            margin-top:20px;
        }
        /*第1个div平铺方式为：repeat*/
        #div1{border-image:url(img/border.png) 30 repeat;}
        /*第2个div平铺方式为：round*/
        #div2{border-image:url(img/border.png) 30 round;}
        /*第3个div平铺方式为：stretch*/
        #div3{border-image:url(img/border.png) 30 stretch;}
    </style>
</head>
<body>
    <div id="div1">repeat</div>
    <div id="div2">round</div>
    <div id="div3">stretch</div>
</body>
</html>

登入後複製

瀏覽器預覽效果如下圖所示：

css怎麼設定圖片邊框

分析：

border-image屬性的平鋪方式有3種：repeat、round、stretch。

（1）取值為repeat時，表示4條邊的小方塊會不斷重複，超出元素部分將會被剪下掉。

（2）取值為round時，表示4條邊的小方塊會鋪滿。為了鋪滿，邊框圖片會壓縮或拉伸。

（3）取值為stretch時，表示4條邊的小方塊會拉伸，邊長有多長就拉多長。

border-image的衍生子屬性

border-image屬性可以分開，分別為4條邊設定對應的背景圖片，這4條邊的屬性如下表所示。

##說明border-top-image定義上邊框背景圖片#border-bottom-image定義下邊框背景圖片border-left-image#定義左邊框背景圖片border-right-image定義右邊框背景圖片

border-image的衍生子屬性
子屬性

（學習影片分享：

css影片教學）

以上是css怎麼設定圖片邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7753

Java教學

1643

CakePHP 教程

1398

Laravel 教程

1293

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。