小編給大家分享一下如何使用css做兩頭變尖的直線,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:域名申請、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設、徽縣網(wǎng)站維護、網(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)不同方向(指定為一個角度)的漸變效果,如果不指定方向,默認從上到下漸變。
語法: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做兩頭變尖的直線”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文標題:如何使用css做兩頭變尖的直線
文章網(wǎng)址:http://muchs.cn/article12/ispddc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供標簽優(yōu)化、網(wǎng)站收錄、做網(wǎng)站、品牌網(wǎng)站建設、網(wǎng)站設計、面包屑導航
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)