css怎么增加邊框

發(fā)布時(shí)間：2021-07-27 10:25:02 來(lái)源：億速云閱讀：197 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下css怎么增加邊框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

增加邊框的方法有：1、border屬性，圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，該屬性允許你規(guī)定元素邊框的樣式、寬度和顏色；2、border-image屬性，border-image屬性用于設(shè)置圖片邊框。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS border 屬性

元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

每個(gè)邊框有 3 個(gè)方面：寬度、樣式，以及顏色。

CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。

border 簡(jiǎn)寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>

可以按順序設(shè)置如下屬性：

border-width：規(guī)定邊框的寬度。

border-style：規(guī)定邊框的樣式。

border-color：規(guī)定邊框的顏色。

示例：

<html>
<head>
<style type="text/css">
div{border:1px solid #000} 
</style>
</head>

<body>
<div>div添加邊框</div>
</body>

</html>

效果

css怎么增加邊框

CSS border-image屬性

border-image屬性用于設(shè)置圖片邊框，它是一個(gè)簡(jiǎn)寫屬性，設(shè)置所有 border-image-* 屬性。如果省略值，會(huì)設(shè)置其默認(rèn)值。

語(yǔ)法：

border-image: source slice width outset repeat|initial|inherit;

屬性值：

border-image-source：用于指定要用于繪制邊框的圖像的位置
border-image-slice：圖像邊界向內(nèi)偏移
border-image-width：圖像邊界的寬度
border-image-outset：用于指定在邊框外部繪制 border-image-area 的量
border-image-repeat：用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。

border-image的用處

沒(méi)用border-image之前，覺(jué)得css的屬性基本夠用，border-image完全是將簡(jiǎn)單的工作復(fù)雜化，當(dāng)學(xué)習(xí)完該屬性以后，發(fā)現(xiàn)該屬性的運(yùn)用能夠大大節(jié)省編碼時(shí)間和效率，總結(jié)一下，大致適用于以下兩個(gè)場(chǎng)景：

元素邊框不規(guī)則的情況。這時(shí)候，就需要用設(shè)計(jì)圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用代碼控制邊框背景的拉伸和重復(fù)，因而能夠創(chuàng)造出更多樣的效果

按鈕寬高不確定的情況。用border-image來(lái)制作按鈕，可以用同一張背景圖，制造出各種寬高的按鈕。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 屬性用于指定一個(gè)元素的邊框圖像。</p>
<p id="borderimg1">在這里，圖像平鋪（重復(fù)），以填補(bǔ)該地區(qū)。</p>
<p id="borderimg2">在這里，圖像被拉伸以填補(bǔ)該地區(qū)</p>
<p>這是原始圖片:</p><img src="/images/border.png">
</body>
</html>

效果

css怎么增加邊框

以上是“css怎么增加邊框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

css怎么增加邊框

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽