优惠券css

61 阅读1分钟

1677651715538.png

 .box{

        width: 160px;

        height: 100px;
        /* background: radial-gradient(shape size at position, start-color, ..., last-color);

        background-position:圆画在优惠券的左边

        background-size: (x,y)两个圆之间的距离
        */
        background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);

        background-position: 121px -8px;

        background-size: 100% 100px;
        margin-bottom: 30px;
}

.box1 {

    width: 160px;

    height: 100px;

    background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px) top left, linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px) bottom right;

    background-size: 17px 100px, 116px 100px, 17px 100px;

    background-repeat: no-repeat;

    background-position: 10px 0px,26px 0px,142px 0px;

}
</style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
 </body>