站長資訊網(wǎng)
css中可給元素添加“background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);”樣式繪制兩頭變尖直線。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用線性漸變linear-gradient()函數(shù)來做兩頭變尖的直線。
示例：
<!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() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。
創(chuàng)建一個線性漸變，需要指定兩種顏色，還可以實現(xiàn)不同方向（指定為一個角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。
語法：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視頻教程》
