CSS之background:linear-gradient-偶像资源网

linear-gradient:渐变模式

效果一：

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\"> 
<title>OX520(manongw.com)</title> 
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
 
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
 
<div id=\"grad1\"></div>
 
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
 
</body>
</html>

效果：

前一个颜色的结束和下一个颜色的开始若是一样的则不会渐变

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
   background: linear-gradient(to right, red 50% , blue 50%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
 
<div id=\"grad1\"></div>
</body>
</html>

效果：

效果二：角度的渐变-对角

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
   background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
 
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
 
<div id=\"grad1\"></div>
 
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
 
</body>
</html>

效果：

效果三：指定渐变角度

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 100px;
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}
 
#grad2 {
    height: 100px;
    background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}
 
#grad3 {
    height: 100px;
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}
 
#grad4 {
    height: 100px;
    background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
}
	#grad5 {
    height: 100px;
    background: linear-gradient(10deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
 
<h3>线性渐变 - 使用不同的角度</h3>
<div id=\"grad1\" style=\"color:white;text-align:center;\">0deg</div><br>
<div id=\"grad2\" style=\"color:white;text-align:center;\">90deg</div><br>
<div id=\"grad3\" style=\"color:white;text-align:center;\">180deg</div><br>
<div id=\"grad4\" style=\"color:white;text-align:center;\">-90deg</div><br>
<div id=\"grad5\" style=\"color:white;text-align:center;\">10deg</div>
 
 
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
 
</body>
</html>

效果：

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Html/CSS
# linear-gradient # css渐变

CSS之background:linear-gradient

请登录后发表评论