css中的border-image-outset屬性怎么用

發(fā)布時(shí)間：2022-02-25 11:39:44 來(lái)源：億速云閱讀：162 作者：小新欄目：web開發(fā)

小編給大家分享一下 css中的border-image-outset屬性怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　CSS3border-image-outset屬性

　　作用：規(guī)定邊框圖像超過(guò)邊框盒的量。

　　語(yǔ)法：

　　border-image-outset:length|number;

　　length：表示設(shè)置邊框圖像（border-image）與邊框的距離，默認(rèn)為0。

　　number：代表相應(yīng)的border-width的倍數(shù)。

　　說(shuō)明：

　　1、border-image-outset屬性規(guī)定邊框圖像超出邊框盒的量，包括上下部和左右部分。如果忽略第四個(gè)值，則與第二個(gè)值相同。如果省略第三個(gè)值，則與第一個(gè)值相同。如果省略第二個(gè)值，則與第一個(gè)值相同。

　　2、border-image-outset屬性不允許使用任何負(fù)值。

　　CSS3border-image-outset屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<style>

　　.box{

　　width:600px;

　　margin:100pxauto;

　　border:1pxsolidred;

　　}

　　border:15pxsolid;

　　padding:30px;

　　border-image:url(1.jpg)100round;

　　border-image-outset:1px10px8px;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="box">

　　</div>

　　</body>

　　</html>

看完了這篇文章，相信你對(duì)“ css中的border-image-outset屬性怎么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

猜你喜歡