css3 kecerunan linear-kecerunan linear
Kecerunan linear: menukar warna di sepanjang paksi (mendatar atau menegak), dan melakukan kecerunan berjujukan dari titik permulaan ke warna akhir (menarik dari satu sisi ke sisi yang lain).
Penjelasan terperinci tentang kecerunan linear-kecerunan linear bagi css3:
kecerunan termasuk kecerunan linear-kecerunan linear dan kecerunan jejari-kecerunan jejarian.
Bab ini hanya memperkenalkan kecerunan linear Untuk kecerunan jejari, sila rujuk bab kecerunan jejari CSS3.
Inti penyemak imbas yang popular pada masa ini terutamanya termasuk yang berikut:
(1 Mozilla (Firefox, Flock, dll.).
(2).WebKit (Safari, Chrome, dsb.).
(3) Opera (pelayar Opera).
(4) Trident (pelayar IE), pelayar IE9 dan ke atas menyokong atribut ini.
Sintaks terbaharu kecerunan linear pada asasnya adalah sama (Google Chrome juga mempunyai struktur sintaks yang agak lama, yang akan diperkenalkan di bawah).
Struktur tatabahasa:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
Analisis parameter:
(1). Nilai mata boleh kiri, atas, kanan atau bawah, atau gabungan yang sesuai daripadanya. kiri bermaksud dari kiri ke kanan, atas bermaksud dari atas ke bawah, kiri atas bermaksud dari sudut kiri atas ke sudut kanan bawah, dan seterusnya. Sudut menentukan sudut, yang akan diperkenalkan di bawah.
(2).<berhenti>: Diperlukan, parameter kedua dan ketiga masing-masing ialah warna permulaan dan warna akhir Sudah tentu, lebih banyak parameter boleh dimasukkan di antaranya untuk mewakili berbilang kecerunan warna.
Ilustrasinya adalah seperti berikut:
Versi lama Google Chrome juga mempunyai struktur tatabahasa seperti berikut:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
Semuanya mesti mengikut peredaran zaman, artikel ini Struktur tatabahasa ini telah ditinggalkan, dan rakan-rakan yang berminat boleh menyemaknya sendiri.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.left{
background:-webkit-linear-gradient(left, #ace,#f96 );
background:-moz-linear-gradient(left, #ace,#f96 );
background:-o-linear-gradient(left,#ace,#f96);
}
.top{
background:-webkit-linear-gradient(top, #ace,#f96 );
background:-moz-linear-gradient(top, #ace,#f96 );
background:-o-linear-gradient(top,#ace,#f96);
}
.lefTop{
background:-webkit-linear-gradient(left top, #ace,#f96 );
background:-moz-linear-gradient(left top, #ace,#f96 );
background:-o-linear-gradient(left top,#ace,#f96);
}
.more{
background:-webkit-linear-gradient(left, #ace, #f96, #0094ff );
background:-moz-linear-gradient(left, #ace, #f96, #0094ff );
background:-o-linear-gradient(left, #ace, #f96, #0094ff);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="top"></div>
<div class="lefTop"></div>
<div class="more"></div>
</body>
</html>
Kod di atas menunjukkan penggunaan asas kecerunan linear Ia adalah sangat mudah.
Dalam demonstrasi sebelum ini, kedudukan warna tidak dinyatakan, jadi kecerunan diagihkan secara sekata, sebenarnya, kita boleh mengawal kawasan kecerunan.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 80%, #f96);
background:-moz-linear-gradient(left, #ace 80%, #f96);
background:-o-linear-gradient(left,#ace 80%, #f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
Kod di atas menentukan julat kecerunan, bermula daripada 80% untuk tindakan kecerunan . Oleh kerana yang kedua Tiada warna yang ditentukan, jadi kedudukan akhir kecerunan adalah 100%. Maksudnya, kedudukan sebelum 80% adalah warna pepejal tanpa kesan kecerunan, dan kawasan antara 80%-100% adalah kecerunan. Mari lihat contoh kod:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left, #ace 30%, #f96 80% );
background:-moz-linear-gradient(left, #ace 30%, #f96 80%);
background:-o-linear-gradient(left,#ace 30%, #f96 80%);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
Kod di atas menetapkan bahawa kawasan antara 30% dan 80% ialah kawasan kecerunan, dan kawasan lain adalah warna pepejal.
Mengenai penggunaan sudut:
Dalam struktur tatabahasa yang diperkenalkan pada permulaan artikel, parameter pertama juga boleh menjadi sudut, seperti berikut:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
Ia adalah mendatar garis dengan Sudut yang dihasilkan oleh garis kecerunan adalah lawan jam Jika anda tidak menentukan sudut, ia akan secara automatik menentukan sudut berdasarkan kedudukan permulaan.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(30deg,#ace,#f96);
background:-moz-linear-gradient(30deg,#ace,#f96);
background:-o-linear-gradient(30deg,#ace,#f96);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
Sudut kecerunan ditetapkan di atas, yang mungkin statik dan tidak kondusif untuk pemerhatian dan pemahaman . Ini adalah satu lagi kesan tetapan berterusan.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:150px;
height:80px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(0deg,#ace,#f96);
background:-moz-linear-gradient(0deg,#ace,#f96);
background:-o-linear-gradient(0deg,#ace,#f96);
}
</style>
<script>
window.onload = function () {
var odiv = document.getElementsByTagName("div")[0];
var obt = document.getElementById("bt");
obt.onclick = function () {
var timer = null;
var count = 0;
timer = setInterval(function () {
if (count == 360) {
clearInterval(timer);
}
count = count + 1;
odiv.style.background = "-webkit-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-moz-linear-gradient(" + count + "deg,#ace,#f96)";
odiv.style.background = "-o-linear-gradient(" + count + "deg,#ace,#f96)";
}, 100)
}
}
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
Klik butang untuk melihat kesan penetapan sudut secara dinamik, yang boleh membantu dengan pemahaman.
Aplikasi ketelusan:
Kecerunan linear juga boleh digunakan untuk ketelusan Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:1000px;
height:667px;
margin:20px;
}
.antzone{
background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
background:-o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)),url(http://img01.taopic.com/141002/240423-14100210124112.jpg);
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
<🎜. >
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
