.container {
    margin: 10px;
    border-bottom: 1px solid;
}
.container-wrap:after {
    content: '';
    display: block;
    clear: both;
}
.container-wrap img {
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
    display: block;
}
.content {
    width: 150px;
    height: 100px;
    font: bold 18px/1 '';
    text-align: center;
    color: white;
    float: left;
    margin: 10px;
}


/* 圆形渐变 - 指定中心点位置 （position) */
.circle-position .content:nth-of-type(1){
    background: radial-gradient(circle at center, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(2){
    background: radial-gradient(circle at top, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(3){
    background: radial-gradient(circle at right, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(4){
    background: radial-gradient(circle at bottom, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(5){
    background: radial-gradient(circle at left, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(6){
    background: radial-gradient(circle at top left, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(7){
    background: radial-gradient(circle at top right, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(8){
    background: radial-gradient(circle at bottom right, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(9){
    background: radial-gradient(circle at bottom left, red,orange, rgb(30, 144, 255));
}
.circle-position .content:nth-of-type(10){
    background: radial-gradient(circle at 20px 20px, red,orange, rgb(30, 144, 255));
}

/* 椭圆形渐变 - 指定中心点位置 （position） */
.ellipse-position .content:nth-of-type(1){
    background: radial-gradient(at center, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(2){
    background: radial-gradient(at top, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(3){
    background: radial-gradient(at right, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(4){
    background: radial-gradient(at bottom, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(5){
    background: radial-gradient(at left, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(6){
    background: radial-gradient(at top left, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(7){
    background: radial-gradient(at top right, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(8){
    background: radial-gradient(at bottom right, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(9){
    background: radial-gradient(at bottom left, red,orange, rgb(30, 144, 255));
}
.ellipse-position .content:nth-of-type(10){
    background: radial-gradient(at 20px 20px, red,orange, rgb(30, 144, 255));
}

/* 定义径向渐变的形状(shape) */
.shape .content:nth-of-type(1){
    background: radial-gradient(circle, red,orange, rgb(30, 144, 255));
}
.shape .content:nth-of-type(2){
    background: radial-gradient(ellipse, red,orange, rgb(30, 144, 255));
}

/*圆形渐变 - 指定渐变的尺寸（size）*/
.circle-size .content:nth-of-type(1){
    background: radial-gradient(circle  closest-side at 50% 75%, red,orange, rgb(30, 144, 255));
}
.circle-size .content:nth-of-type(2){
    background: radial-gradient(circle  farthest-side at 50% 75%, red,orange, rgb(30, 144, 255));
}
.circle-size .content:nth-of-type(3){
    background: radial-gradient(circle  closest-corner at 50% 75%, red,orange, rgb(30, 144, 255));
}
.circle-size .content:nth-of-type(4){
    background: radial-gradient(circle  farthest-corner at 50% 75%, red,orange, rgb(30, 144, 255));
}

/*椭圆形渐变 - 指定渐变的尺寸（size）*/
.ellipse-size .content:nth-of-type(1){
    background: radial-gradient(closest-side at 50% 75%, red,orange, rgb(30, 144, 255));
}
.ellipse-size .content:nth-of-type(2){
    background: radial-gradient(farthest-side at 50% 75%, red,orange, rgb(30, 144, 255));
}
.ellipse-size .content:nth-of-type(3){
    background: radial-gradient(closest-corner at 50% 75%, red,orange, rgb(30, 144, 255));
}
.ellipse-size .content:nth-of-type(4){
    background: radial-gradient(farthest-corner at 50% 75%, red,orange, rgb(30, 144, 255));
}

/* 重复的径向渐变 */
.repeating .one{
    background: repeating-radial-gradient(red, orange 10%, yellow 15%);
}