css3 線性漸變和徑向漸變

阿新 • • 發佈：2018-09-14

兩種 font display color ott splay left gre com

技術分享圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>線性漸變和徑向漸變</title>
        <style type="text/css">
            #dd{
                width: 500px;
                height: 200px;
                /*線性漸變*/
                background-image: linear-gradient(red,yellow);
            }
            #dd1{
                width: 500px;
                height: 200px;
                 
/*方向線性漸變*/
                background-image: linear-gradient(to top right,red,yellow);
            }
            #dd2{
                width: 500px;
                height: 200px;
                /*角度線性漸變*/
                background-image: linear-gradient(45deg,red,yellow);
            }
            #dd3{
                width: 500px;
                height: 200px;
                 
/*多種顏色等比例漸變*/
                background-image: linear-gradient(to bottom right,red 0%,yellow 30%, orange 60%,green 100%);
            }
            #dd4{
                width: 500px;
                height: 200px;
                /*徑向漸變*/
                background-image: radial-gradient(green,blue);
            }
            #dd5{
                width: 500px;
                height: 200px;
                 
/*橢圓徑向漸變*/
                background-image: radial-gradient(ellipse,red,yellow);
            }
            #dd6{
                width: 500px;
                height: 200px;
                /*圓形可設置大小的徑向漸變*/
                background-image: radial-gradient(circle 100px,#000,#ff0000);
            }
            #dd7{
                width: 500px;
                height: 200px;
                /*重復的徑向漸變*/
                background-image:repeating-radial-gradient(circle 50px,#000,#ff0000);
            }
            /* 文字漸變 */
            .text-gradient {  
                display: inline-block;
                font-family: ‘微軟雅黑‘;
                font-size: 10em;
                position: relative; 
            }  
              
            .text-gradient[data-text]::after {  
                content: attr(data-text);  
                color: #FBEE00;  
                position: absolute;  
                left: 0;  
                z-index: 2;
                -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FBEE00), to(rgba(251,246,147,.6)));
            }
        </style>
    </head>
    <body>
        <h1>線性漸變</h1>
        <div id="dd">
            線性漸變
        </div>
        <div id="dd1">
            方向線性漸變
        </div>
        <div id="dd2">
            角度線性漸變
        </div>
        <div id="dd3">
            多種顏色等比例漸變
        </div>
        <h1>徑向漸變</h1>
        <div id="dd4">
            兩種顏色徑向漸變
        </div>
        <div id="dd5">
            橢圓徑向漸變
        </div>
        <div id="dd6">
            圓形可設置大小的徑向漸變
        </div>
        <div id="dd7">
            重復的徑向漸變
        </div>
        <h2 class="text-gradient" data-text="文字漸變">文字漸變</h2> 
    </body>
</html>
<script>
    var dd = document.getElementById("dd7");
    var xd = 50;
    setInterval(function(){
        xd+=5;
        if(xd>=100){
            xd=50;
        }
        dd.style.backgroundImage=‘repeating-radial-gradient(circle ‘+xd+‘px,red,yellow)‘;
    },100);
</script>

css3 線性漸變和徑向漸變

兩種 font display color ott splay left gre com <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

css3漸變、線性漸變和徑向漸變

以前，你必須使用影象來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬頻的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。 CSS3 定義了兩種型別的漸變（grad

使用canvas來完成線性漸變和徑向漸變的功能

fillStyle的第二種使用情況就是漸變色的填充。漸變色就分為線性漸變色和徑向漸變色。線性漸變:大致分為兩步這裡又會使用到canvas的兩個新的函式。第一步 : 使用一個新的函式createLinearGradient( xstart，ystart,xend,yen

CSS3漸變(gradients)-線性漸變、徑向漸變

線性漸變:至少定義兩種顏色結點。顏色結點即想要呈現平穩過渡的顏色。同時，可以設定一個起點和一個方向（或一個角度）。線性漸變 - 從上到下（預設情況下）使用角度:角度是指水平線和漸變線之間的角度，逆時針方向計算例子：http://www.runoob.com/

CSS3_線性漸變_徑向漸變----背景

漸變的本質：繪製一張背景圖片，所以使用 background 或者 background-image background 的諸多屬性，漸變都是可以使用的（repeat，position）百分比：把元素漸變方向的整體長度看成 100% 線性漸變

線性漸變與徑向漸變與重複漸變

css3移動端簡單的背景漸變和文字漸變

背景漸變寫法： background-image: -moz-linear-gradient(top, #fdfdfd, #f8f8f8); /* Firefox */ background-image: -webkit-gradient(linear, left top,

漸變和canvas漸變矩形

在canvas中實現漸變有2種方式第一種：通過遍歷點的值實現第二種：建立漸變的方案——createLinearGradient 第一種： <canvas width="600" height="400"></canva

基於echarts的背景色漸變和圖例漸變的例項

圖例漸變的效果如下圖所示：程式碼結構入下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>圖例漸變&

字型顏色漸變和邊框漸變的一個方法

.test {position: relative;margin: auto;height: 80px;width: 200px;border-radius: 40px;background-color: #fff;&:before {content: '';background: linear-gr

CSS3--線性漸變

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS線性漸變--從上到下(預設情況)</title> <style>

10個demo示例學會CSS3 radial-gradient徑向漸變

一、語法細節記不住怎麼辦？實際開發的時候，當要使用radial-gradient徑向漸變的時候，腦中會有大概的語法，但是細節卻記不住，於是想快捷找個案例看看具體怎麼用，然後直接套一下。通常一番搜尋，會發現雖然是個簡單需求，但是正好滿足這個需求的頁面卻不好找，亂

CSS 相容IE8的線性漸變和旋轉

因IE8不相容CSS3旋轉和漸變的屬性，改用filter實現漸變以下效果為橫向漸變，從左到右，加了透明度filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 finishopacity=50 style=1 sta

CSS3 線性漸變

background: linear-gradient(direction, color-stop1, color-stop2, ...); 從上到下： #grad { background: -webkit-linear-gradient(red, blue); /* Safari

CSS3 經典教程系列：CSS3 線性漸變（linear-gradient）

　CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是針對線性漸變來剖析其具體的用法。為了更好的應用 CSS3 Gradient，我們需要先了解一下目前的幾種現代瀏覽器的核心，

前端學習-10個demo示例學會CSS3 radial-gradient徑向漸變

線性應用場景就會感覺會有 20px sid red rom 一、語法細節記不住怎麽辦？實際開發的時候，當要使用radial-gradient徑向漸變的時候，腦中會有大概的語法，但是細節卻記不住，於是想快捷找個案例看看具體怎麽用，然後直接套一下。通常一番搜索，會發現雖

關於ie兼容css3圓角與陰影與漸變的渲染

pan 文件背景調用 class wid 多圖片圖片屬性我們都知道，ie不兼容一些css3新屬性，這就導致有些瀏覽效果不太好，關於ie的兼容有很多前輩給出了解決方案。這裏我主要講我用到的一個比較好用的方案，即PIE。這裏的PIE實際上指的是一個名為pie.htc的

8.2 css3 新增標簽盒子模型長度單位顏色漸變徑像漸變

color ips side near nbsp 高度相對文字 rgba # CSS3 盒子模型 * box-sizing 值 content-box 默認值包括所有的值 / border-box 只算邊框的長與寬 * res

web前端小案例-css3制作瀏覽器背景漸變背

JavaScript 前端 css3 案例知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。 css代碼： <style> *{margin:0;padding:0;}

自定義元件開發五陰影、漸變和點陣圖運算

介紹陰影、漸變和點陣圖運算等技術陰影只是一個狹義的說法，實際上也包括髮光等效果；Android 也提供了強大的漸變功能，漸變能為物體帶來更真實的質感，比如可以用漸變繪製一顆五子棋或一根金屬圓棒；點陣圖運算就更有趣了，Android 為 Bitmap 的運算提供了多達16 種運算方法，

css3 線性漸變和徑向漸變

相關推薦