首頁  >  文章  >  web前端  >  css圖片的邊框怎麼設定顏色為漸層色

css圖片的邊框怎麼設定顏色為漸層色

青灯夜游
青灯夜游原創
2022-01-20 17:08:294304瀏覽

在css中,可以利用border-image屬性和linear-gradient()函數來將圖片邊框的顏色設定為漸變色,語法「border:邊框大小solid;border-image:linear-gradient( ...) 1;}」。

css圖片的邊框怎麼設定顏色為漸層色

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以利用border-image屬性和linear-gradient()函數來將圖片邊框的顏色設定為漸變色

  • border-image屬性用於設定圖片邊框

  • linear-gradient()函數用於實作線性漸變

實作程式碼:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			img{
				 border: 4px solid;
				 border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="css圖片的邊框怎麼設定顏色為漸層色" >
	</body>

</html>

css圖片的邊框怎麼設定顏色為漸層色

#(學習影片分享:css影片教學

以上是css圖片的邊框怎麼設定顏色為漸層色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn