怎麼用css做兩頭變尖的直線
- 青灯夜游原創
- 2021-09-10 17:32:522842瀏覽
css中可為元素添加“background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);”兩頭變尖直線。
本教學操作環境：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>
說明：
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