HTML CSS背景颜色彩色渐变色

博主：茶白
发布时间：2021 年 03 月 15 日
暂无评论
1506字数
分类： css

```
<style>

div{
            width: 50px;
            height: 50px;
           
        }

/* 多种颜色 */
        div:nth-child(1){
            background:linear-gradient(to right, red , orange, yellow , green ,blue , purple)
        }

div:nth-child(2){
            background: radial-gradient(red , yellow , green);
        }

div:nth-child(3){
            background: radial-gradient(red 5%, yellow 15%, green 60%);
        }

div:nth-child(4){
            background: radial-gradient(circle , red , yellow ,green);
        }

div:nth-child(5){
            background: radial-gradient(closest-side at 60% 50% ,red , yellow , black);
        }

div:nth-child(6){
            background: radial-gradient(farthest-side at 60% 55% , red , yellow , black);
        }
        
        div:nth-child(7){
            background: radial-gradient(red , yellow 10%, green 15%);
        }

/* 角度问题 */
        div:nth-child(8){
            /* background: linear-gradient(#fff ,#333); */
            /* background: linear-gradient(90deg, #fff ,#333); */
            background: linear-gradient(45deg, #fff ,#f00 50%,#090);
        }

/* 透明度 */
        div:nth-child(9){
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
        }

/* 重复性渐变 */
        div:nth-child(10){
            background: linear-gradient(red , yellow 10% , green 20%);
        }

</style>
```

最后修改：2021 年 03 月 15 日