html5-css渐变色

div{
    width: 300px;
    height: 100px;
    margin: 50px;
    padding: 50px;
    border:5px groove rgba(200,60,30,0.8);
}
#div1{
    background-image: linear-gradient(red,blue);
}
#div2{
    background-image: linear-gradient(to right,red,blue);
}
#div3{
    background-image: linear-gradient(to right bottom,red,blue);
}
#div4{
    background-image: linear-gradient(60deg,red,blue);
}
#div5{
    background-image: linear-gradient(red,blue,orange,green);
}
#div6{
    background-image: linear-gradient(60deg,red 10%,blue 30%,orange 60%,green 80%);
}
#div7{
    background-image: linear-gradient(60deg,red 10px,blue 30px,orange 60px,green 300px);
}
#div8{
    /*background: linear-gradient(60deg,orange 20px,red 40px);*/
background: repeating-linear-gradient(60deg,orange 20px,red 40px);
}

#div9{        
    background: radial-gradient(red,blue,green);
}
#div10{
    background: radial-gradient(circle,red,blue,orange);
}
#div11{
    background: radial-gradient(circle at right,red,blue,orange);
}
#div12{
    background: radial-gradient(circle at right top,red,blue,orange);
}
#div13{
    background: radial-gradient(circle 50px,red,blue,orange);
}
#div14{
    background: radial-gradient(circle closest-side,red,blue,orange);
}
#div15{
    background: radial-gradient(circle farthest-side,red,blue,orange);
}
#div16{
    background: radial-gradient(circle closest-corner,red,blue,orange);
}
#div17{
    background: radial-gradient(circle farthest-corner,red,blue,orange);
}
#div18{
    background:repeating-radial-gradient(circle 5px,red,orange);
}

转载于:https://www.cnblogs.com/houweidong/p/7795063.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值