首頁 > 文章 > web前端 > 怎麼用css做兩頭變尖的直線

怎麼用css做兩頭變尖的直線

青灯夜游原創: 2021-09-10 17:32:522769瀏覽

css中可為元素添加“background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);”兩頭變尖直線。

怎麼用css做兩頭變尖的直線

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

在css中，可以利用線性漸變linear-gradient()函數來做兩頭變尖的直線。

範例：

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: red;
		}

		.Line {
			width: 1px;
			height: 500px;
			background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="Line"></div>
</body>
</html>

怎麼用css做兩頭變尖的直線

說明：

linear-gradient() 函數用來建立一個表示兩種或更多種顏色線性漸層的圖片。

建立一個線性漸變，需要指定兩種顏色，還可以實現不同方向（指定為一個角度）的漸變效果，如果不指定方向，預設從上到下漸變。

語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

值	說明
direction	以角度值指定漸層的方向（或角度）。
color-stop1, color-stop2,...	用於指定漸層的起止顏色。

範例：

//线性渐变指定一个角度:
#grad { background-image: linear-gradient(180deg, red, yellow);}

//线性渐变指定多个终止色:
#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

//透明度:
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

推薦教學：《CSS影片教學》

以上是怎麼用css做兩頭變尖的直線的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：css中有幾種樣式下一篇：css中有幾種樣式

看更多