【Html】07-利用背景渐变制作背景

利用背景渐变制作背景

实例一：

<style>
body {
		background:
                radial-gradient(circle at 10% 12%, #88ECC6, #88ECC6 26.7%, transparent 27%),
                radial-gradient(circle at 91% 32%, #cf9, #cf9 20.5%, transparent 21%),
                radial-gradient(circle at 84% 122%, #FEAC5E, #FEAC5E 21%, transparent 22%),
                radial-gradient(circle at 23% 108%, #BAD4E5, #BAD4E5 25%, transparent 26%),
                #333 radial-gradient(circle at 63% -18%, #FCA6A5, #FCA6A5 19.8%, transparent 21%);
            background-attachment: fixed;
        }
</style>

代码预览效果

实例二：（星空）

<style>
        body {
            background:
                radial-gradient(#fff, rgba(255, 255, 255, .15), transparent 8px) 10px 150px/300px 300px,
                radial-gradient(#ff9, rgba(255, 255, 153, .15), transparent 8px) 70px 250px/300px 300px,
                radial-gradient(#ff6, rgba(255, 102, 102, .25), transparent 10px) 300px 300px/300px 300px,
                radial-gradient(#ff6, rgba(255, 102, 102, .35), transparent 28px) 80px 180px/500px 500px,
                radial-gradient(#ff6, rgba(255, 102, 102, .35), transparent 20px) 0px 50px/500px 500px,
                radial-gradient(#9cc, rgba(153, 204, 204, .35), transparent 28px) 0px 50px/500px 500px,
                radial-gradient(#ffc, rgba(204, 255, 102, .15) 23px, transparent 30px) 0px 220px/1200px 1200px,
                radial-gradient(#cff, rgba(204, 204, 255, .15) 23px, transparent 30px) 100px 180px/1200px 1200px,
                radial-gradient(#699, rgba(102, 153, 153, .25), transparent 28px) -520px 520px/400px 350px,
                radial-gradient(#00f, rgba(0, 0, 255, .25), transparent 28px) -520px 500px/2000px 2000px,
                radial-gradient(#09c, rgba(0, 153, 204, .25), transparent 28px) -520px 520px/1000px 1000px,
                #000 radial-gradient(#6cc, rgba(102, 204, 204, .5), transparent 18px) -50px 150px/400px 400px;
        }
</style>

代码预览效果

---

END