简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

CSS3怎么做出过渡渐变效果

php中世界最好的语言
Lepaskan： 2017-11-24 10:46:29
asal
2581 orang telah melayarinya

大家知道在CSS3里有一个过渡渐变的效果，那么这次就来和大家交流一下过渡渐变使用方法和以及使用技巧，下面给大家举一个小列子。

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

-webkit-gradient(渐变类型，起点，结束点,[开始颜色，结束颜色，过渡色])

·                         线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

·                         径向渐变（Radial Gradients）- 由它们的中心定义

linear-gradient（颜色1，颜色2）

线性渐变的使用：

radial-gradient

颜色均匀分布

background: -webkit-radial-gradient(red, green, blue);

颜色按照百分比分布

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

案列：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
  border:1px solid #000;
  width:150px;
  height:150px;
  /*background: -webkit-radial-gradient(red, green, blue);
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
  background: -webkit-radial-gradient(  red, yellow, green);
 }
</style>
<body>
<div id="dv">
 
</div>
</div>
</body>
</html>
Salin selepas log masuk

过渡渐变的使用方法就这么多了， 更多精彩请关注php中文网其它相关文章！

相关阅读：

html的绝对路径和相对路径怎么使用

HTML5里Canvas常用的绘图技巧

html文字怎么竖排显示

Atas ialah kandungan terperinci CSS3怎么做出过渡渐变效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css css3
sumber：php.cn
Artikel sebelumnya：CSS3怎么做出关门开门效果 Artikel seterusnya：CSS3的运动体系怎么做出来
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！