CSS3_线性渐变

最新推荐文章于 2021-08-03 19:48:59 发布

冬天下雪啦

最新推荐文章于 2021-08-03 19:48:59 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wutrg1502/article/details/80800125

<!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-origin: padding-box;
-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;
background: #f78d1d;
}
.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>