CSS3奇特的漸變示例
漸變
4個維度去理解漸變
線性漸變
徑向漸變
新寫法
老寫法html
最後的老寫法鏡像漸變可能不太準確。其他都徹底正確web
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS By 李可</title>
<style>
.demo {
width: 300px;
height: 300px;
/********************************************整體介紹***********************************************/
/*
新寫法：屬性「-...-linear-gradient」有三個參數。
第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。
第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。
webkit老寫法：屬性「-webkit-gradient」是webkit引擎對漸變的實現，一共有五個參數。
第一個參數表示漸變類型（type），能夠是linear（線性漸變）或者radial（輻射漸變）。
第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比left top（左上角）和left bottom（左下角）。
第四個和第五個參數，分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個表示該點的顏色。
IE依靠濾鏡實現漸變。startColorstr表示起點的顏色，endColorstr表示終點顏色。GradientType表示漸變類型，0爲缺省值，表示垂直漸變，1表示水平漸變。*/
/********************************************線性漸變***********************************************/
/*w3c新寫法推薦*/
/*步步加深*/
/*background-image: linear-gradient(to bottom,red,green);*/
/*background-image: linear-gradient(to bottom,red 0%,green 100%); */
/*按照方向，到25%爲一直第一種顏色，25%-75%是漸變，75%-100%也是漸變。*/
/*background-image: linear-gradient(to bottom,red 25%,blue75%,green 100%);*/
/*按照方向，到25%爲一直第一種顏色，25%兩邊的顏色分別用2個值寫出來。25%-75%是漸變，75%-100%也是漸變。*/
/*background-image: linear-gradient(to bottom,red 25%,yellow 25%,blue 75%,gray 75%,green 100%);*/
/*加上各個瀏覽器前綴*/
/*background-image:-webkit-linear-gradient( to bottom,red,green); webkit不支持to*/
/*background-image:-webkit-linear-gradient(top,red,green);*/
/*webkit用這個代替*/
/*background-image:-moz-linear-gradient( to bottom,red,green); */
/*moz支持to*/
/*background-image:-ms-linear-gradient( to bottom,red,green); *
/*background-image:-o-linear-gradient( to bottom,red,green);*/
/* moz不支持，但支持-webkit-*/
/*角度：水平爲0deg，逆時針轉動爲正值，順時針爲負值。一週360deg，能夠多週轉動*/
/*background-image:-moz-linear-gradient(0deg,red,green);*/
/*background-image:-webkit-linear-gradient(270deg,red,green); */
/* background-image:-webkit-linear-gradient(-90deg,red,green); */
/*background-image:-webkit-linear-gradient(450deg,red,green); */
/*新寫法實戰*/
/*background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);*/
/*background-image: -webkit-linear-gradient(-45deg, red 25%, blue 25%,transparent 50%, green 50%, rgba(255, 255, 255, 0.15) 75%, yellow 75%, transparent);*/
/*只有weblit老寫法 ，5個參數*/
/* from to只是2個簡單的變色*/
/*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red),to(green));*/
/*color-stop插在 from to的任意位置*/
/*background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(50%,#ccc), from(red),color-stop(10%,yellow),to(green),color-stop(80%,blue));*/
/*background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#444444),color-stop(1,#999999));*/
/*老寫法實戰*/
/*後面能夠有to()*/
/*background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(222, 255, 255, 0.5)), color-stop(0.25, blue), color-stop(0.5, red), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 1)), color-stop(0.75, transparent), to(rgba(255, 255, 255, 1)));*/
/********************************************ie9之前版本使用濾鏡***********************************************/
/*GradientType表明漸變線方向，0爲垂直(默認)，1爲水平*/
/*ie8*/
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='red', endColorstr='#00ff00');
/*ie6,ie7*/
/*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='red', endColorstr='#00ff00');*/
/******************************bootstrap源碼中運用的線性漸變及ie濾鏡例子*********************************/
/*
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);*/
/********************************************重複線性漸變***********************************************/
/*只有當首尾兩顏色位置不在0%或100%時，重複漸變才生效*/
/*方向默認從上到下，假如div高度100，第一個20%決定了以20爲起點，最後一個50%減去第一個20%等於=30%，100/30=3，div最少分3份，具體分幾分，要看起點*/
/*和和線性漸變的主要區別：起點25%，不表示從0到25%是一種顏色，而是補過來的*/
/*background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);
background-image: repeating-linear-gradient(blue 20%,green 50%);*/
/*試一試多個*/
/*background-image: -webkit-repeating-linear-gradient(blue 20%,green 30%,yellow 40%);*/
/********************************************徑向漸變***********************************************/
/*新寫法*/
/*background-image:-webkit-radial-gradient(red 20%,green);不寫座標，默認在中心*/
/*background-image:-webkit-radial-gradient(150px 150px,red 20%,green);座標數值*/
/*background-image:-webkit-radial-gradient(left bottom,red 20%,green);*/
/*座標關鍵詞*/
/*徑向漸變的默認cover，手動設定爲circle，就不會自動填充*/
/*background-image:-webkit-radial-gradient(150px 150px,circle,red 20%,green 70%,yellow 80%);*/
/*徑向漸變同一個位置green 100px,transparent 100px,能夠實現截斷的目的*/
/*徑向漸變red 50px,green 100px,transparent 100px,不按百分比*/
/*background-image:-webkit-radial-gradient(40px 50px,red 50px,green 100px,transparent 100px,transparent);*/
/*transparent能夠實現一個div上多個「圓」，多個徑向漸變*/
/* background-image:-webkit-radial-gradient(40px 50px,red 50px,green 100px,transparent 100px,transparent),
-webkit-radial-gradient(260px 50px,red 50px,green 100px,transparent 100px,transparent),
-webkit-radial-gradient(260px 200px,circle,red 50px,green 100px,transparent 100px,transparent);*/
/*多瀏覽器*/
/* background-image:-webkit-radial-gradient(center center,red 20%,green);
background-image:-moz-radial-gradient(center center,red 20%,green);
background-image:-ms-radial-gradient(center center,red 20%,green);
background-image:-o-radial-gradient(center center,red 20%,green);*/
/*老寫法*/
/*規則：-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
/* from to只是2個簡單的變色*/
/*background-image: -webkit-gradient(radial, 0 0, 50,50 50,60, from(red),to(green));*/
background-image: -webkit-gradient(radial, 1 1, 10, 49 49, 100, color-stop(20%, green), color-stop(20%, red), color-stop(30%, yellow));
/*我的理解：第一個color-stop(20%,green)，起點是內圓圓心，重點是外圓的半徑長，不固定。
20%是第一個圓心到外半徑的任意比例，這個不是固定的長度，由於在各個方向的20%不相等，內圓圓心不在外圓的圓心上，因此不能填寫固定值。*/
/*background-image: -webkit-gradient(radial, 30 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent));*/
/*內圓圓心跑到外圓包圍圈的狀況*/
/*background-image: -webkit-gradient(radial, 190 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent))*/
/*經常多個環狀效果，暈狀效果*/
/*background-image: -webkit-gradient(radial, 50 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent)),-webkit-gradient(radial, 150 150, 10,180 180,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent));*/
}
</style>
</head>
<body>
<div class="demo">ddd d</div>
</body>
</html>
相關文章
- 1. css3漸變特性
- 2. CSS3背景漸變特性
- 3. CSS3的漸變
- 4. Css3漸變實例Demo（一）
- 5. CSS3 漸變
- 6. CSS3 漸變（Gradients）
- 7. CSS3:background漸變
- 8. css3漸變
- 9. css3漸變(gradient)
- 10. CSS3漸變——gradient
- 更多相關文章...
- • SVG 漸變 - 線性 - SVG 教程
- • Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
- • JDK13 GA發佈：5大特性解讀
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css3漸變特性
- 2. CSS3背景漸變特性
- 3. CSS3的漸變
- 4. Css3漸變實例Demo（一）
- 5. CSS3 漸變
- 6. CSS3 漸變（Gradients）
- 7. CSS3:background漸變
- 8. css3漸變
- 9. css3漸變(gradient)
- 10. CSS3漸變——gradient