亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用CSS3實(shí)現(xiàn)背景漸變的方法

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class='gradient1'></div>    
  2. <div class='gradient2'></div>    
  3. <div class='gradient3'></div>   

CSS 規(guī)則如下。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*為元素盒子添加樣式*/    
  2. div {    
  3.  height:150px;    
  4.  width:200px;    
  5.  border:1px solid #ccc;    
  6.  float:left;    
  7.  margin:16px;    
  8. }    
  9.   
  10. /*例 1：默認(rèn)為從上到下*/    
  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)建放射性漸變時(shí)，可以使用參數(shù)指定形狀、位置、尺寸、顏色和不透明度

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }   


相關(guān)文章

  • CSS3實(shí)現(xiàn)帶視差背景漸變效果的平滑圖片輪播幻燈片特效源碼

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

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

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

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

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

  • CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫效果

    這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非?？犰诺母惺埽?/div> 2016-10-19

  • CSS實(shí)現(xiàn)背景漸變和自動(dòng)全屏的代碼

    這篇文章主要介紹了CSS 關(guān)于背景漸變和自動(dòng)全屏的實(shí)現(xiàn)代碼，本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考
    2020-06-22

最新評(píng)論