位置:首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS3 邊界邊框border-image

提問(wèn)人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-19

    border-image屬性規(guī)定可以使用圖片作為元素的邊框。它再次為Web前端工程師帶來(lái)福音,利用它可以自定義更加有趣美觀的元素邊框了,而不是只能使用原來(lái)CSS預(yù)設(shè)的那些邊框。

    border-image屬性是一個(gè)簡(jiǎn)寫(xiě)屬性,用于設(shè)置以下屬性:bordeMmage-source、border- image-slice、border-image-width、border-image-outset、border-image-repeat0 

    如果省略值,代碼會(huì)設(shè)置其默認(rèn)值。 border-image屬性的值包括以下幾個(gè):

    ?border-image-source: 用于迫框的圖片的路徑。

    ?border-image-slice:圖片邊框向內(nèi)偏移。

    ?border-image-width: 圖片邊框的寬度。

    ?border-image-outset: 邊框圖像區(qū)域超出邊框的量。

    ?border-image-repeat:圖像邊框是否應(yīng)平鋪(repeated )、鋪滿(rounded )或拉伸 (stretched)。

    下面用一個(gè)實(shí)例了解border-image屬性。

    【例題】使用border-image屬性

    代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style> 

div{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round{

border-image:url(border.png) 30 30 round;

}

#stretch{

border-image:url(border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">在這里,圖片鋪滿整個(gè)邊框。</div>

<br>

<div id="stretch">在這里,圖片被拉伸以填充該區(qū)域。</div>

<p>這是我們使用的圖片:</p>

<img src="border.png">

</body>

</html>

image.png

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部