欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用CSS3實現背景漸變的方法

segmentfault   發(fā)布時間：2015-07-14 15:48:40   作者：佚名   我要評論
這篇文章主要介紹了用CSS3實現背景漸變的方法,作者并沒有給出效果demo這個比較殘念...需要的朋友可以參考下

CSS3 之前，必須依賴 Adobe Photoshop 等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。 而現在， 使用 CSS就可以創(chuàng)造出各種漸變效果了。漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性

CSS Code復制內容到剪貼板
  1. <div class='gradient1'></div>    
  2. <div class='gradient2'></div>    
  3. <div class='gradient3'></div>   

CSS 規(guī)則如下。

CSS Code復制內容到剪貼板
  1. /*為元素盒子添加樣式*/    
  2. div {    
  3.  height:150px;    
  4.  width:200px;    
  5.  border:1px solid #ccc;    
  6.  float:left;    
  7.  margin:16px;    
  8. }    
  9.   
  10. /*例 1：默認為從上到下*/    
  11. .gradient1 {    
  12.  background:linear-gradient(#e86a43, #fff);    
  13. }    
  14.   
  15. /*例 2：從左到右*/    
  16. .gradient2 {    
  17.  background:linear-gradient(left, #64d1dd, #fff);    
  18. }    
  19.   
  20. /*例 3：左上到右下*/    
  21. .gradient3 {    
  22.  background:linear-gradient(-45deg, #e86a43, #fff);    
  23. }   

放射性漸變

在創(chuàng)建放射性漸變時，可以使用參數指定形狀、位置、尺寸、顏色和不透明度

CSS Code復制內容到剪貼板
  1. .gradient1 {    
  2.  background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);    
  3. }    
  4. .gradient2 {    
  5.  background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);    
  6. }    
  7. .gradient3 {    
  8.  background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,    
  9. #4947ba);    
  10. }   


相關文章

  • CSS3實現帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼

    這是一款基于CSS3實現帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼。畫面中心的幻燈片點擊左右切換按鈕、或底部的焦點即可實現畫面的切換。且圖片平滑輪播切換過程中伴
    2019-12-04

  • 詳解CSS背景漸變圖片transtion過渡效果技巧

    這篇文章主要介紹了詳解CSS背景漸變圖片transtion過渡效果技巧的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-26

  • css3編寫瀏覽器背景漸變背景色的方法

    本篇文章主要介紹介紹了css3編寫瀏覽器背景漸變背景色的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-05

  • CSS3點擊按鈕實現背景漸變動畫效果

    這篇文章給大家介紹的是，利用CSS3實現當點擊按鈕的時候，按鈕的背景是漸變動畫的效果，實現后的效果非常好，開發(fā)的時候利用這種效果的按鈕會給用戶一種非?？犰诺母惺?，感
    2016-10-19

  • CSS實現背景漸變和自動全屏的代碼

    這篇文章主要介紹了CSS 關于背景漸變和自動全屏的實現代碼，本文通過實例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考
    2020-06-22

最新評論