经向渐变：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5之radial-gradient经向渐变</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 1px solid #000;
float: left;
margin: 0 0 10px 10px;
}
/* 默认的样式 */
.box1 {
background-image: radial-gradient(red,yellow,blue);
}
/* 通过 position 控制圆心 使用 at 与 关键词 */
.box2 {
background-image: radial-gradient(at left top,red,yellow,blue);
}
/* 通过 position 控制圆心 使用 at 与 数值 */
.box3 {
background-image: radial-gradient(at 100px 100px,red,yellow,blue);
}
/* 通过 position 控制圆心 使用 at 与 一个值*/
.box4 {
background-image: radial-gradient(at 10px,red,yellow,blue);
}
/* 通过 shape 控制形状 */
.box5 {
background-image: radial-gradient(circle,red,yellow,blue);
}
/* 通过 shape 控制形状 */
.box6 {
background-image: radial-gradient(closest-side circle,red,yellow,blue);
}
/* 通过 shape 控制形状 */
.box7 {
background-image: radial-gradient(closest-corner circle at 100px 10px,red,yellow,blue);
}
/* 通过 shape 控制形状 */
.box8 {
background-image: radial-gradient(farthest-side circle at 10px 100px,red,yellow,blue);
}
/* 通过 shape 控制形状 */
.box9 {
background-image: radial-gradient(farthest-corner circle,red,yellow,blue);
}
.box10 {
background: #655;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
-webkit-background-size: 30px 30px;
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
</body>
</html>
6563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
