麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > css3漸變屬性怎么使用?c3漸變用法教程

css3漸變屬性怎么使用?c3漸變用法教程

來源:千鋒教育
發布人:zyh
時間: 2023-05-29 13:13:00 1685337180

  CSS3中的漸變(Gradient)屬性可以讓我們用平滑的顏色過渡實現多彩背景的效果。漸變屬性分為線性漸變和徑向漸變,每種漸變又分為顏色漸變和透明度漸變。

css3漸變屬性怎么使用

  ### 線性顏色漸變

  線性顏色漸變由起點、終點和中間點顏色組成。通過定義起點、終點和中間點顏色,可以實現從一種顏色過渡到下一種顏色的效果。語法如下:

background: linear-gradient(direction, color-stop1, color-stop2, .....)

      其中,direction表示漸變方向,可以為to left、to right、to top、to bottom,也可以指定角度。

  color-stop表示顏色的停止點,可以設置多個顏色停止點。例如:

div {
background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設置一條從左到右的漸變線,分別從紅到綠再到藍。

  ### 線性透明度漸變

  線性透明度漸變與顏色漸變類似,可以設置漸變的起點、終點和顏色。但其顏色值可以帶有透明度值。語法如下:

background: linear-gradient(direction, rgba(color1, opacity1), rgba(color2, opacity2), .....)

      其中,opacity表示不透明度,可以為0到1之間的小數。例如:

div {
background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設置一條從左到右的透明度漸變,從完全透明到不透明的紅色。

  ### 徑向顏色漸變

  徑向漸變是以一個圓心為半徑,向外輻射狀的顏色漸變。可以設置起點、終點和中間點顏色,實現從一種顏色過渡到下一種顏色的效果。語法如下:

background: radial-gradient(shape size at position, start-color, ..., last-color);

     其中,shape是漸變形狀,可以是circle或ellipse,size表示漸變大小,可以是closest-side、closest-corner等值,at position表示漸變位置,可以是數值或方向。例如:

div {
background: radial-gradient(ellipse at center, #ff0000, #00ff00, #0000ff);
}

      上述代碼表示設置一個以圓心為半徑,從紅到綠再到藍的圓形漸變。

css3漸變屬性怎么使用

  ### 徑向透明度漸變

  徑向透明度漸變與顏色漸變類似,可以設置漸變的起點、終點和顏色。但其顏色值可以帶有透明度值。語法如下:

background: radial-gradient(shape size at position, rgba(start-color, opacity1), ..., rgba(last-color, opacityn));

      例如:

div {
background: radial-gradient(circle, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

      上述代碼表示設置一個圓形透明度漸變,從完全透明到不透明的紅色。

  總之,CSS3中的漸變屬性可以讓頁面變得更加鮮明多彩,用好了可以增加頁面的美感和觀賞性。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 免费观看性欧美大片无片| 免费一级毛片在线播放不收费| 国产自产2023最新麻豆| 免费1夜情网站| 国产又粗又猛又大的视频| 久久综合综合久久| 欧洲美女与动zooz| 韩国三级香港三级日本三级| 深夜a级毛片| 上原亚衣一区二区在线观看| 国产国语一级毛片| 第四色播日韩第一页| 美女的胸又黄又www网站免费| 一级毛片看**在线视频| 天天做天天爱夜夜爽毛片毛片| 91视频久久久久| 菠萝蜜视频入口| 欧美国产日本高清不卡| 深夜福利影院在线观看| 被夫上司持续入侵大桥未久| 日本成片| 中文字幕在线视频免费观看| 你懂的免费在线观看| 欧美性最猛xxxx在线观看视频| 欧美乱大交| 欧美成a人免费观看| 好男人社区在线www| 一区二区三区午夜| 国产三级在线观看播放| 四虎成人精品在永久免费| 国产精品亚洲精品日韩动图| 美女被免费视频网站| 羞羞歪歪| 亚洲精品高清国产一久久| 乱中年女人伦av三区| 把水管开水放b里是什么感觉| 国产精品欧美一区二区三区| 国产对白受不了了中文对白| 中文字幕在线视频免费观看| 美国式禁忌矿桥矿17集| 欧美日产国产亚洲综合图区一|