Nota "CSS3 Practical Combat"--Reka Bentuk Kecerunan (1)_Pertukaran Pengalaman

Berbanding dengan kecerunan imej, kelebihan terbesar kecerunan berasaskan CSS ialah ia mudah diubah suai dan menyokong penskalaan tanpa langkah, menjadikan peralihan lebih semula jadi. Pada masa ini, hanya pelayar berdasarkan enjin Webkit dan Gecko boleh melaksanakan kecerunan CSS Pelayar Opera berdasarkan enjin Presto tidak menyokong kecerunan buat masa ini Walaupun IE berdasarkan Trident boleh mencapainya melalui penapis, ia tidak disyorkan.

Reka bentuk kecerunan CSS untuk enjin Webkit (Safari 4 dan ke atas)

Sintaks asas:

-webkit-gradient(<type>,<point>[,<radius>]&#63;,<point>[,<radius>]&#63;[,<stop>]*)

Perihalan parameter:

<type></type>: Tentukan jenis kecerunan, termasuk kecerunan linear (linear) dan kecerunan jejari (jejarian).

<point></point>: Tentukan koordinat titik mula dan titik tamat kecerunan, iaitu, koordinat paksi-x dan paksi-y di mana kecerunan mula digunakan, dan koordinat di mana kecerunan berakhir. Parameter ini menyokong nilai berangka, peratusan dan kata kunci, seperti (0, 0) atau (kiri, atas), dsb. Kata kunci termasuk atas, bawah, kiri dan kanan.

<radius></radius>: Apabila mentakrifkan kecerunan jejari, ia digunakan untuk menetapkan panjang kecerunan jejari Parameter ini ialah nilai berangka.

<stop></stop>: Tentukan warna kecerunan dan saiz langkah. Ia termasuk tiga jenis nilai, iaitu warna permulaan, yang ditakrifkan menggunakan fungsi dari (nilai warna), yang ditakrifkan menggunakan fungsi kepada (nilai warna): langkah warna, ditakrifkan menggunakan hentian warna (nilai, nilai warna); ). color-stop() mengandungi dua nilai parameter Nilai parameter pertama ialah nilai berangka atau nilai peratusan, julat nilai ialah 0~1.0 (atau 0%~100%), dan nilai parameter kedua mewakili sebarang nilai warna.

Penggunaan asas kecerunan linear:

/*简单的线性渐变背景色，从顶部到底部，从蓝色向红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

Kesan demo:

/*从顶部到中间，再从中间到底部，从蓝色到绿色，再到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));

Kesan demo:

/*设计二重渐变，从顶部到底部，先是从蓝色到白色渐变显示，再从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));

Kesan demo:

/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，再从百色到黑色渐变，最后是从黑色到红色渐变显示*/

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

Kesan demo:

Ringkasan: Fungsi color-stop() mengandungi dua nilai parameter Nilai parameter pertama menentukan kedudukan tanda sudut, dan parameter kedua menentukan warna tanda warna. Kecerunan boleh mengandungi berbilang hentian warna Nilai kedudukan ialah perpuluhan antara 0 dan 1, atau peratusan antara 0 dan 100%, menyatakan nisbah kedudukan hentian warna.

Penggunaan asas kecerunan jejari

/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变，超过外圆半径显示为绿色，内圆显示红色*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));

Paparan kesan:

/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径向渐变。当内圆和外圆半径相等时，则渐变无效*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));

Kesan demo:

/*同心圆（圆心坐标为200，100），内圆半径为100，外圆半径为10，内圆大于外圆半径，从内圆红色到外圆绿色径向渐变，超出内圆半径显示为红色，外圆显示绿色*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));

Kesan demo:

/*非同心圆，内圆圆心和外圆圆心的距离小于两圆半径的差，则显示上图效果，呈现锥形径向渐变效果。锥形的尖锐性与两圆圆心距离成正比*/
background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));

Kesan demo:

/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

Kesan demo:

/*通过设置to()函数的颜色值为透明，可以设计发散的圆形效果*/
background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

Kesan demo:

/*通过设置to（）函数的颜色值为透明，同时设计相似色，可以设计球形效果*/
background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

Kesan demo:

/*通过为背景图定义多个径向渐变，可以设计多个气泡效果，如下图所示*/
background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

Kesan demo:

Aplikasi kecerunanTentukan sempadan kesan kecerunan

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
 border-width: 20px;
 width: 400px;
 height: 200px;
 margin: 20px;
 -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

Kesan demo:

Tentukan kesan kandungan isian

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
 width:400px;
 height:200px;
 border:10px solid #A7D30C;
 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
 float:left;
}
.div1::before {
 width:400px;
 height:200px;
 border:10px solid #019F62;
 content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
 display: block;
}
</style>
</head>

<body>
<div class="div1">透视框</div>
</body>
</html>

Kesan paparan:

Tentukan ikon senarai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
 list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>

<body>
<ul>
 <li>新闻列表项1</li>
 <li>新闻列表项2</li>
 <li>新闻列表项3</li>
 <li>新闻列表项4</li> 
</ul>
</body>
</html>

Kesan demo: