html盒子渐变色,CSS3 颜色渐变

/p>

Document

margin: 0;

padding: 0;

}

.container {

width: 1000px;

margin: 0 auto;

}

header {

text-align: center;

line-height: 60px;

}

section {

width: 200px;

height: 200px;

border: 2px solid #ddd;

float: left;

margin: 20px;

border-radius: 10px;

background: #fff;

position: relative;

}

section h3 {

width: 200px;

height: 200px;

text-align: center;

line-height: 200px;

color: blue;

background: rgba(0, 0, 0, 0.1);

border-radius: 10px;

display: none;

position: absolute;

top: 0;

left: 0;

}

section:hover h3 {

display: block;

}

.content {

width: 150px;

height: 150px;

margin: 25px;

}

.item:nth-of-type(1) .content {

/*线性渐变*/

background-image: linear-gradient(yellow, red);

}

/*多个颜色线性渐变*/

.item:nth-of-type(2) .content {

background-image: linear-gradient(skyblue, yellow, pink, orange);

}

/*过渡线性渐变*/

.item:nth-of-type(3) .content {

background-image: linear-gradient(#aaa, #bbb, #ccc, #ddd, #eee, #fff);

}

.item:nth-of-type(4) .content {

/*渐变方向默认从上到下 linear-gradient(1):从上到下; */

background-image: linear-gradient(#abc, #afa, #af0);

}

.item:nth-of-type(5) .content {

background-image: linear-gradient(45deg, #abc, #afa, #af0);

}

.item:nth-of-type(6) .content {

background-image: linear-gradient(to right top, #abc, #afa, #af0);

}

.item:nth-of-type(7) .content {

background-image: linear-gradient(90deg, #abc, #afa, #af0);

}

.item:nth-of-type(8) .content {

background-image: linear-gradient(to right bottom, #abc, #afa, #af0);

}

.item:nth-of-type(9),

.item:nth-of-type(9) h3 {

width: 930px;

}

.item:nth-of-type(9) .content {

background-image: linear-gradient(to right, #fff, #fff 10%, #000 10%, #000 20%, #fff 20%, #fff 30%, #000 30%, #000 40%, #fff 40%, #fff 50%, #000 50%, #000 60%, #fff 60%, #fff 70%, #000 70%, #000 80%, #fff 80%, #fff 90%, #000 90%, #000 100%);

width: 880px;

}

.item:nth-of-type(10) .content {

/*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

background-image: radial-gradient(100px at left top, #abc, #afa, #af0);

}

.item:nth-of-type(11) .content {

/*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

background-image: radial-gradient(100px at 50px 100px, #abc, #afa, #af0);

}

.item:nth-of-type(12) .content {

/*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

background-image: radial-gradient(100px at 50px 100px, #abc 10%, #afa 80%, #af0);

}

.item:nth-of-type(13) .content {

background-image: repeating-linear-gradient(to left, pink 10%, gray 30%);

}

.item:nth-of-type(14) .content {

background-image: repeating-linear-gradient(to left, #000, #000 5%, #fff 5%, #fff 10%);

}

.item:nth-of-type(15) .content {

background-image: repeating-radial-gradient(10px at center center, pink, pink 5%, gray 5%, gray 10%);

}

.item:nth-of-type(16) .content {

background-image: repeating-radial-gradient(10px at center center, pink, gray);

}

.item:nth-of-type(17) .content {

width: 120px;

height: 60px;

text-align: center;

border-radius: 5px;

font-family: “黑体”;

color: #fff;

line-height: 60px;

margin-top: 60px;

background: green;

background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

/*background-image: linear-gradient(#007F00,#004000);*/

}

.item:nth-of-type(18) .content {

border-radius: 50%;

background: blue;

background-image: radial-gradient(100px at 40px 40px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

/*background-image: radial-gradient(120px at 40px 40px,#0000FF,#000065);*/

}

.item:nth-of-type(19) .content {

width: 150px;

height: 50px;

margin-top: 75px;

background-image: repeating-linear-gradient(-45deg, #008000, #008000 14%, #FFFF00 14%, #FFFF00 25%);

background-position: 0 0;

}

渐变

线性渐变

多个颜色线性渐变

过渡线性渐变

渐变方向(默认)

渐变方向45度

渐变方向右上

渐变方向90度

渐变方向右

控制渐变(斑马线)

径向渐变

径向渐变圆心控制

径向渐变颜色过渡控制

重复线性渐变

重复线性渐变(斑马线)

重复径向渐变

重复径向渐变

立体按钮

按钮

立体球

进度条