css中border-image-width屬性如何使用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)css中border-image-width屬性如何使用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司成立于2013年,我們提供高端成都網(wǎng)站建設(shè)公司、網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、成都全網(wǎng)營銷微信平臺小程序開發(fā)、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù),提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地,為成都航空箱企業(yè)提供源源不斷的流量和訂單咨詢。

css border-image-width屬性用于指定圖像邊界的寬度,可以設(shè)置4個(gè)值(不可為負(fù)值),把邊框圖像分割為九個(gè)部分。它們代表了從區(qū)域的上、右、下、左側(cè)向內(nèi)的距離。

css border-image-width屬性怎么用?

border-image-width屬性規(guī)定圖像邊框的寬度。

語法:

border-image-width: number|%|auto;

屬性值:

number:表示相應(yīng)的border-width 的倍數(shù)

%:邊界圖像區(qū)域的大小:橫向偏移的寬度的面積,垂直偏移的高度的面積

auto:如果指定了,寬度是相應(yīng)的image-slice的內(nèi)在寬度或高度。

注釋:

border-image-width 屬性的的4個(gè)值指定用于把邊框圖像分割為九個(gè)部分。它們代表了從區(qū)域的上、右、下、左側(cè)向內(nèi)的距離。

如果忽略第四個(gè)值,則與第二個(gè)值相同。如果省略第三個(gè)值,則與第一個(gè)值相同。如果省略第二個(gè)值,則與第一個(gè)值相同。不允許任何負(fù)值作為 border-image-width 值。

css border-image-width屬性 示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div {
				border: 30px solid transparent;
				border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
				border-image-width: auto;
				border-image-repeat: round;
				border-image-slice: 30;
			}
		</style>
	</head>
	<body>
		<div>DIV 使用圖像邊框</div>
		<p>使用的圖片:</p>
		<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png">

	</body>

</html>

效果圖:

css中border-image-width屬性如何使用

感謝各位的閱讀!關(guān)于css中border-image-width屬性如何使用就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!

名稱欄目:css中border-image-width屬性如何使用-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載:http://www.muchs.cn/article14/dgigge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)云服務(wù)器、網(wǎng)站收錄虛擬主機(jī)

廣告

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

成都網(wǎng)站建設(shè)公司