css 优惠券样式大全

优惠券一

// 优惠券一
<div class="card"><div class="card-left">350书券</div><div class="card-right"><p class="card-info">满30元送350书券</p><strong class="card-time">仅剩 04:48:49</strong></div>
</div><style>
.card{display: flex;align-items: center;width: 16%;padding: 10px 0;background: #fff;border-radius: 8px;-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px),radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);-webkit-mask-size: 100%, 2px 4px;-webkit-mask-repeat: repeat, repeat-y;-webkit-mask-position: 0 -4px, 87px;-webkit-mask-composite: source-out;mask-composite: subtract;background: linear-gradient(45deg, orange, red);
}
.card-left{width: 88px;text-align: center;font-size: 18px;color: #fff;
}
.card-right{padding: 16px 12px;display: flex;flex: 1;flex-direction: column;
}
.card-info{margin: 0;font-size: 14px;line-height: 20px;color:#fff;
}
.card-time{font-size: 12px;line-height: 16px;font-weight: normal;color: #fff;margin-top: 4px;
}
</style>

优惠券二

// 优惠券二
<div class="item"><div class="box"><div class="content"><div class="page-group"><i class="fold-page"></i><span class="page">折扣券</span></div><i class="dot-left"></i><i class="dot-right"></i></div><div class="footer"><div class="footer-label">使用说明</div><div>请在指定门店兑换</div></div><div class="ribbon">已失效</div></div>
</div><style>
.item {width: 349px;overflow: hidden;margin-bottom: 10px;padding-left: 2px;position: relative;
}
.box {background: #fff;border-radius: 5px;background: linear-gradient(45deg, orange, red);
}
.item .dot-left,.item .dot-right {display: block;width: 12px;height: 12px;border-radius: 50%;background: #f5f5f5;position: absolute;z-index: 999;
}
.item .dot-left {bottom: -6px;left: -6px;
}
.item .dot-right {bottom: -6px;right: -6px;
}
.item .page-group {position: absolute;top: 10px;left: -2px;width: 100%;max-width: 120px;
}
.item .page-group .fold-page {display: block;width: 2px;height: 5px;background: #db0113;transform: skewY(-40deg);position: absolute;top: -1px;left: 0;z-index: 0;
}
.item .page-group .page {position: absolute;z-index: 1;display: block;padding: 0 10px;height: 20px;background: linear-gradient(137deg, #ff5b5b 0%, #db0113 100%);border-radius: 0 20px 20px 0;color: #fff;text-align: center;font-size: 12px;overflow: hidden;
}
.item .content {width: 100%;height: 90px;border-bottom: 1px dotted #f5f5f5;position: relative;z-index: 2;
}
.item .footer {color: #fff;font-size: 12px;padding: 5px 15px 10px 15px;
}
.footer-label {line-height: 24px;
}
.item .ribbon {width: 80px;height: 20px;background: #dd0d1f;position: absolute;right: -20px;top: 10px;transform: rotateZ(45deg);text-align: center;color: #fff;font-size: 12px;
}
</style>

优惠券三

// 优惠券三
<div class="content"></div>.content {width: 300px;height: 150px;margin: auto;-webkit-mask: radial-gradient(circle at 10px, transparent 10px, red 0) -10px / 100% 30px;background: linear-gradient(45deg, orange, red);
}

优惠券四

// 优惠券四
<div class="content"></div>.content {width: 300px;height: 130px;margin: auto;-webkit-mask: radial-gradient( circle at 50%, red 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;background: linear-gradient(45deg, orange, red);
}

优惠券五

// 优惠券五
<div class="content"></div>.content {width: 300px;height: 130px;margin: auto;-webkit-mask: radial-gradient( circle at 5px, red 5px, transparent 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;background: linear-gradient(45deg, orange, red);
}

优惠券六

// 优惠券六
<div class="content"></div>.content {width: 300px;height: 150px;margin: auto;-webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%; background: linear-gradient(45deg, orange, red);
}

优惠券七

// 优惠券七
<div class="content"></div>.content {width: 300px;height: 130px;margin: auto;-webkit-mask: radial-gradient(circle at 20px, transparent 20px, red 0) -20px; background: linear-gradient(45deg, orange, red);
}

css 优惠券样式大全相关推荐

CSS 网页样式大全
字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 font-style: obliqu ...
CSS阴影样式大全(包含所有样式： demo代码全)看图看代码
常用的阴影样式 <html> <head><title></title><style type="text/css">d ...
css表格样式大全中英对照,css样式中英文对照表.docx
类型 font-family字体 font-size字体大小 font-style 字体样式(斜体/偏斜体) line-height行高 text- decoration下划线/上划线 font-we ...
CSS 字体样式大全
属性描述 font-family 设置元素的字体 font-size 设置字体的大小 font-style 设置字体的风格 font-weight 设置字体的粗细 font 在一个声明中设置所有的字 ...
CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
css 圆点样式优惠券样子
css 圆点样式优惠券样子 css .tax-split {position: absolute;height: 130px;width: 1px;left: 80%;top: 0; }.tax-s ...
css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {fo ...
html 样式大全,2017最新css样式大全
2017最新css样式大全 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网 ...
CSS font-famil 字体样式大全
CSS字体属性样式大全

css 优惠券样式大全

css 优惠券样式大全相关推荐

最新文章

热门文章