CSS3_線性漸變
阿新 • • 發佈：2018-12-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style type="text/css">
div{
width: 400px;
height: 200px;
padding: 4px;
}
.div1{
background: -webkit-gradient(linear,left top,left bottom,from(gold),to(#FF6100));
-webkit-background-clip: content-box;
}
.div2{
background: -webkit-gradient(linear,left top,right bottom,from(gold),to(#FF6100));
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;
}
.div3{
background: linear-gradient(to right,rgba(255,215,0,0.4),rgba(255,97,0,1));
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;
}
button{
width: 100px;
height: 40px;
color: #fef4e9;
border: solid 1px #da7c0c;
}
.btn1 {
background: -webkit-gradient(linear, left top, left bottom, from(gold), to(#FF6100));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.btn2{
background: -webkit-gradient(linear, left top, right bottom, from(gold), to(#FF6100));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.btn3{
background: linear-gradient(to right,rgba(255,215,0,0.4),rgba(255,97,0,1));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
</head>
<body>
<div class="div1">
<p>由左上至左下的漸變(金色-橙色)</p>
</div>
<div class="div2">
<p>由左上至右下的漸變</p>
</div>
<div class="div3">
<p>從左到右背景色為半透明的漸變</p>
</div>
<div>
<button>純色按鈕</button>
<button class="btn1">漸變按鈕1</button>
<button class="btn2">漸變按鈕2</button>
</div>
<div >
<button class="btn3">漸變按鈕3</button>
</div>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style type="text/css">
div{
width: 400px;
height: 200px;
padding: 4px;
}
.div1{
background: -webkit-gradient(linear,left top,left bottom,from(gold),to(#FF6100));
-webkit-background-clip: content-box;
}
.div2{
background: -webkit-gradient(linear,left top,right bottom,from(gold),to(#FF6100));
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;
}
.div3{
background: linear-gradient(to right,rgba(255,215,0,0.4),rgba(255,97,0,1));
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;
}
button{
width: 100px;
height: 40px;
color: #fef4e9;
border: solid 1px #da7c0c;
}
.btn1 {
background: -webkit-gradient(linear, left top, left bottom, from(gold), to(#FF6100));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.btn2{
background: -webkit-gradient(linear, left top, right bottom, from(gold), to(#FF6100));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.btn3{
background: linear-gradient(to right,rgba(255,215,0,0.4),rgba(255,97,0,1));
background: -moz-linear-gradient(top, gold, #FF6100);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
</head>
<body>
<div class="div1">
<p>由左上至左下的漸變(金色-橙色)</p>
</div>
<div class="div2">
<p>由左上至右下的漸變</p>
</div>
<div class="div3">
<p>從左到右背景色為半透明的漸變</p>
</div>
<div>
<button>純色按鈕</button>
<button class="btn1">漸變按鈕1</button>
<button class="btn2">漸變按鈕2</button>
</div>
<div >
<button class="btn3">漸變按鈕3</button>
</div>
</body>
</html>