1.radial-gradient基础使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
margin: 100px 0 0 100px;
width: 400px;
height: 200px;
background-image: radial-gradient(red, blue);
/*控制形状
circle - 圆形的渐变效果
ellipse - 椭圆的渐变效果(默认值)
*/
background-image: radial-gradient(circle, red, blue);
background-image: radial-gradient(ellipse, red, blue);
/*控制圆心的位置
at x y
*/
background-image: radial-gradient(ellipse at 50px 50px, red, blue);
background-image: radial-gradient(ellipse at top, red, blue);
background-image: radial-gradient(ellipse at 50% 0, red, blue);
background-image: radial-gradient(ellipse at 50% 100%, red, blue);
background-image: radial-gradient(ellipse at center, red, blue);
/*修改渐变的半径
默认:基于元素宽度的1/2作为其水平及垂直半径
*/
background-image: radial-gradient(circle 20px at center, red, blue);
background-image: radial-gradient(20px 80px at center, red, blue);
}
.box:hover {
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
2.重复径向渐变:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
margin: 100px 0 0 100px;
width: 400px;
height: 200px;
background-image: radial-gradient(red, blue);
/*
需求:径向渐变(红色,黄色,蓝色),圆形,圆心位于元素的右上角,半径100px。
*/
background-image: radial-gradient(circle 100px at 100% 0, red, yellow, blue);
background-image: radial-gradient(circle , red, yellow, blue);
/*重复径向渐变*/
background-image: repeating-radial-gradient(circle,
red 0, red 10px, yellow 10px, yellow 20px, blue 20px, blue 30px) ;
}
.box:hover {
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
3,.简单应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
margin: 100px 0 0 100px;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
background-image: repeating-radial-gradient(red 0px, red 5px, #fff 5px, #fff 10px);
}
.box:hover {
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
效果: