密通学院

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 355|回复: 0

css实现简单优惠券卡券的方法

[复制链接]
  • TA的每日心情
    可爱
    2018-6-29 10:04
  • 263

    主题

    282

    帖子

    7万

    铜板

    超级版主

    Rank: 8Rank: 8

    积分
    77312
    QQ
    发表于 2021-8-31 11:34:19 | 显示全部楼层 |阅读模式
    1. <!DOCTYPE html>
    2. <html>
    3.         <head>
    4.                 <meta charset="utf-8">
    5.                 <title></title>
    6.                 <style>
    7.                         /* .content{
    8.                                 -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px);
    9.                         } */
    10.                         html{
    11.                           height:100%;
    12.                         }
    13.                         body{
    14.                           height:100%;
    15.                           display:flex;
    16.                           margin:0;
    17.                           flex-direction: column;
    18.                         }
    19.                         .content {
    20.                           width: 300px;
    21.                           height: 150px;
    22.                           margin: auto;
    23.                           /* -webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0); */
    24.                           -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0);
    25.                           background: linear-gradient(45deg, orange, red);
    26.                         }
    27.                         .content1 {
    28.                           width: 300px;
    29.                           height: 150px;
    30.                           margin: auto;
    31.                           -webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, blue 0);
    32.                           -webkit-mask-size: 50%;
    33.                           -webkit-mask-position: 0, 100%;
    34.                           -webkit-mask-repeat: no-repeat;
    35.                           background: linear-gradient(45deg, orange, red);
    36.                         }
    37.                         .content2 {
    38.                           width: 300px;
    39.                           height: 150px;
    40.                           margin: auto;
    41.                           -webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, red 0);
    42.                           -webkit-mask-composite: source-in;
    43.                           background: linear-gradient(45deg, orange, red);
    44.                         }
    45.                         .content3 {
    46.                           width: 300px;
    47.                           height: 150px;
    48.                           margin: auto;
    49.                           -webkit-mask: radial-gradient(circle at 0 0, transparent 20px, red 0), radial-gradient(circle at right 0, transparent 20px, red 0), radial-gradient(circle at 0 100%, transparent 20px, red 0), radial-gradient(circle at right 100%, transparent 20px, red 0);
    50.                           -webkit-mask-composite: source-in;
    51.                           background: linear-gradient(45deg, orange, red);
    52.                         }
    53.                         .content4 {
    54.                           width: 300px;
    55.                           height: 150px;
    56.                           margin: auto;
    57.                           -webkit-mask: radial-gradient(circle at 20px, transparent 20px, red 0) -20px;
    58.                           background: linear-gradient(45deg, orange, red);
    59.                         }
    60.                         .content5 {
    61.                           width: 300px;
    62.                           height: 150px;
    63.                           margin: auto;
    64.                           -webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px;
    65.                           background: linear-gradient(45deg, orange, red);
    66.                         }
    67.                         
    68.                         .wrap{
    69.                           width: 300px;
    70.                           height: 150px;
    71.                           min-width: 100px;
    72.                           min-height: 100px;
    73.                           margin: auto;
    74.                           overflow: auto;
    75.                           resize: both;
    76.                           filter: drop-shadow(2px 2px 5px orange)
    77.                         }
    78.                         .content6 {
    79.                           height: 100%;
    80.                           margin: auto;
    81.                           -webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px;
    82.                           background: linear-gradient(45deg, orange, red);
    83.                         }
    84.                 </style>
    85.         </head>
    86.         <body>
    87.                 <div class="content"></div>
    88.                 <div class="content1"></div>
    89.                 <div class="content2"></div>
    90.                 <div class="content3"></div>
    91.                 <div class="content4"></div>
    92.                 <div class="content5"></div>
    93.                
    94.                 <div class="wrap">
    95.                   <div class="content6"></div>
    96.                 </div>
    97.                
    98.         </body>
    99. </html>
    100. 以上为常用的优惠券的css写法。
    复制代码

    20210511104441250.png

    如下图所示。
    如果您有业务需求,可以和我联系:http://wpa.qq.com/msgrd?V=3&amp; ... yes&amp;from=discuz
    回复

    使用道具 举报

    快速回复: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 感恩
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    首页|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

    GMT+8, 2021-9-18 09:31 , Processed in 0.273438 second(s), 30 queries QQ

    Powered by XMT Inc. © 2015-2022 ArrayV1.0 豫ICP备17022382号

    系统运营:密城通 豫公网安备 41018302000212 号

    快速回复 返回顶部 返回列表