cssborder-image屬性用法

這篇文章主要為大家詳細(xì)介紹了css中border-image屬性的用法，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門(mén)，感興趣的小伙伴們可以參考一下。

創(chuàng)新互聯(lián)建站公司2013年成立，先為武陵源等服務(wù)建站，武陵源等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為武陵源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

border-image屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，設(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）或鋪滿(mǎn)（round）。

注：

Internet Explorer 10 及更早的版本不支持 border-image 屬性。Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 屬性。Safari 5 支持替代的 -webkit-border-image 屬性。

說(shuō)明：請(qǐng)使用 border-image-* 屬性來(lái)構(gòu)造漂亮的可伸縮按鈕！

css border-image屬性示例

<!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">
<p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 屬性。</p>
</body>
</html>

效果圖：

css border-image屬性用法

看完上述內(nèi)容，你們對(duì)border-image屬性大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：cssborder-image屬性用法
標(biāo)題路徑：http://aaarwkj.com/article20/gpipjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

cssborder-image屬性用法