一、效果图
二、源码
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>CSS3渐变</title>
???<style>
???????body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
???????????margin: 0;
???????????padding: 0;
???????}
???????body {
???????????background-color: #F7F7F7;
???????}
???????.wrapper {
???????????width: 1000px;
???????????margin: 0 auto;
???????????padding: 20px;
???????????box-sizing: border-box;
???????}
???????header {
???????????padding: 20px 0;
???????????margin-bottom: 20px;
???????????text-align: center;
???????}
???????header h3 {
???????????line-height: 1;
???????????font-weight: normal;
???????????font-size: 28px;
???????}
???????.main {
???????????/*overflow: hidden;*/
???????}
???????.main:after {
???????????content: ‘‘;
???????????clear: both;
???????????display: block;
???????}
???????.main .item {
???????????width: 210px;
???????????height: 210px;
???????????margin: 0 30px 30px 0;
???????????display: flex;
???????????position: relative;
???????????backround-color: #FFF;
???????????float: left;
???????????box-shadow: 2px 2px 5px #CCC;
???????}
???????.main .item:after {
???????????content: attr(data-brief);
???????????display: block;
???????????width: 100%;
???????????height: 100%;
???????????text-align: center;
???????????line-height: 210px;
???????????position: absolute;
???????????top: 0;
???????????left: 0;
???????????color: #FFF;
???????????font-family: ‘微软雅黑‘;
???????????font-size: 18px;
???????????background-color: rgba(170, 170, 170, 0);
???????????z-index: -1;
???????????transition: all 0.3s ease-in;
???????}
???????.main .item:hover:after {
???????????background-color: rgba(170, 170, 170, 0.6);
???????????z-index: 100;
???????}
???????.main .item:nth-child(4n) {
???????????margin-right: 0;
???????}
???????/*.main .item:nth-last-child(-n+5) {
???????????margin-bottom: 0;
???????}*/
???????/* 以上是骨架样式 */
???????.linear-gradient {
???????????width: 170px;
???????????height: 80px;
???????????margin: auto;
???????}
???????/*标准写法*/
???????.item:nth-child(1) .linear-gradient {
???????????background: linear-gradient(yellow, greenyellow);
???????}
???????/*多个颜色渐变*/
???????.item:nth-child(2) .linear-gradient {
???????????background: linear-gradient(royalblue, pink, yellow, greenyellow);
???????}
???????/*用角度确定方向 180deg 正上方为0度 顺时针旋转*/
???????.item:nth-child(3) .linear-gradient {
???????????background: linear-gradient(0deg, yellow, greenyellow);
???????}
???????.item:nth-child(4) .linear-gradient {
???????????background: linear-gradient(90deg, yellow, greenyellow);
???????}
???????.item:nth-child(5) .linear-gradient {
???????????background: linear-gradient(135deg, yellow, blueviolet);
???????}
???????.item:nth-child(5) .linear-gradient {
???????????background: linear-gradient(225deg, yellow, blueviolet);
???????}
???????/*用关键字来确定方向*/
???????.item:nth-child(6) .linear-gradient {
???????????/*background: linear-gradient(to left top, yellow, blueviolet);*/
???????????background: linear-gradient(to right top , paleturquoise, greenyellow);
???????}
???????/*控制渐变*/
???????/*
????????0 - 10
????????10 - 40
????????40 - 60
????????60 - 90
????????90 - 100
?????*/
???????.item:nth-child(7) .linear-gradient {
???????????background: linear-gradient(to left top, yellow 10%, blueviolet 40%, #f5256b 60%, greenyellow 90%);
???????}
???????.item:nth-child(8) .linear-gradient {
???????????height: 150px;
???????????border-radius: 60%;
???????????background: linear-gradient(to left top, #ff6fea 10%, #6fe2b2 40%, #f5d423 60%, #58ff52 90%);
???????}
???</style>
</head>
<body>
<div class="wrapper">
???<header>
???????<h3>CSS3线性渐变</h3>
???</header>
???<div class="main">
???????<div class="item" data-brief="">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???????<div class="item">
???????????<div class="linear-gradient"></div>
???????</div>
???</div>
</div>
</body>
</html>
CSS3线性渐变之linear-gradient
原文地址：https://www.cnblogs.com/zlinger/p/9516908.html