为背景添加渐变样式(线性和放射性两种)

来源：互联网发布：服务器状态监控软件编辑：程序博客网时间：2024/05/19 22:04

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>为背景添加渐变样式</title>

<style>
/*为盒子元素添加样式*/
div {
width:200px;
height:150px;
float:left;
border:1px solid #ccc;
margin:16px;
}

/*设置渐变样式*/

/*线性渐变*/

/*1.默认为从上到下*/
.gradient1 {
background:linear-gradient(#e86a43,#fff);
}
/*2.从左到右*/
/*注意：如果要在谷歌等使用webkit引擎的浏览器，则需要使用-webkit-linear-gradient这个线性渐变属性来设定，否则不起作用*/
.gradient2 {
background:-webkit-linear-gradient(left,#e86a43,#fff);
}
/*3.从左上到右下*/
.gradient3 {
background:linear-gradient(-45deg,#e86a43,#fff);
}

/*放射性渐变*/
/*1.默认渐变*/
/*.gradient1 {
background:-webkit-radial-gradient(#fff,#64d1dd,#70aa25);
}
2.圆形渐变
.gradient2 {
background:-webkit-radial-gradient(circle,#fff,#64d1dd,#e86a43);
}
指定位置的圆形渐变
.gradient3 {
background:-webkit-radial-gradient(50px 30px,circle,#fff,#64d1dd,#e86a43);
}*/
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
</body>
</html>

0 0