CSS-渐变

CSS渐变：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.o{overflow: hidden;}
.div{width: 375px; height: 350px; float: left;}
.div1{ background: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff); }
.div2{ background: linear-gradient(to bottom right, #286aff, #4e6ef2, #7274f9, #9f66ff); }
.div3{ background: linear-gradient(to right, #b7e9d1, #c1d8f2); }

.div3{ background: linear-gradient(to right, #f4c6a6, #fff2e3) no-repeat,linear-gradient(to bottom, transparent, rgba(255,255,255)); background-blend-mode: overlay; }


.div4{ background: linear-gradient(to right, #b7e9d1, #c1d8f2) no-repeat,linear-gradient(to bottom, transparent, rgba(255,255,255)); background-blend-mode: overlay;}

.div5{ background: linear-gradient(to right, #b4e2e4, #a5d9de, #d0caf8) no-repeat,linear-gradient(to bottom, transparent 0%, rgba(255,255,255)); background-blend-mode: overlay;}
</style>
</head>
<body>
<div class="o">
    <div class="div div1"></div>
    <div class="div div2"></div>
    <div class="div div3"></div>
    <div class="div div4"></div>
    <div class="div div5"></div>
</div>
</body>
</html>

打完收工！

posted @ 2025-09-22 09:50  帅到要去报警  阅读(5)  评论(0)    收藏  举报