您现在的位置是：网站首页> 编程资料编程资料

利用css3径向渐变做一张优惠券的示例使用css创建一个优惠券的方法CSS实现优惠券边沿打孔效果纯css3绘制的精美购物优惠券样式效果源码CSS 使用radial-gradient 实现优惠券样式

2021-09-04 972人已围观

简介 这篇文章主要介绍了利用css3径向渐变做一张优惠券的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样想过，如今css3技术这么先进再用背景做平铺是不是已经out了，那么今天给大家介绍一个用css3径向渐变做的优惠券。

CSS3 径向渐变和线性渐变是很相似的，首先来看其语法：

 -moz-radial-gradient([ || ,]? [ || ,]? , [, ]*); -webkit-radial-gradient([ || ,]? [ || ,]? , [, ]*);

除了你已经在线性渐变中看到的起始位置，方向和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。 颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。

做优惠券最主要的代码如下，就是这三句

 background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px); background-size: 15px 15px; background-position: 9px 3px;

不多解释直接上代码

优惠券

CSS代码

这是公共样式
 

 .stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;} .stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;} .stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;} .stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);} .stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;} .stamp .par p{color:#fff;} .stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;} .stamp .par .sign{font-size: 34px;} .stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);} .stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);} .stamp .copy p{font-size: 16px;margin-top: 15px;} .stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;} .stamp01:before{background-color:#F39B00;} .stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;} .stamp02:before{background-color:#D24161;} .stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;} .stamp03:before{background-color:#7EAB1E;} .stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;} .stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;} .stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;} .stamp04{width: 390px;background: #50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;} .stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;} .stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;} .stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;} .stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}

HTML代码

XXXXXX折扣店
￥50.00优惠券
订单满100.00元
副券
2015-08-13
2016-08-13
XXXXXX折扣店
￥50.00优惠券
订单满100.00元
副券
2015-08-13
2016-08-13
XXXXXX折扣店
￥50.00优惠券
订单满100.00元
副券
2015-08-13
2016-08-13
立即使用
XXXXXX折扣店
￥50.00优惠券
订单满100.00元
副券
2015-08-13
2016-08-13
立即使用

PS：用这个方式还可以做邮票，不信你试试

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解如何用div实现自制滚动条div的滚动条如何实现css将div层固定显示在页面底部不随滚动条滚动给DIV添加滚动条的实现代码给div加滚动条 div显示滚动条设置代码css实现div自动添加滚动条(图片或文字等超出时显示)div css 滚动条样式 DIV滚动条属性及样式设置方式

下一篇：巧用CSS3的calc()宽度计算做响应模式布局的方法使用CSS混合模式和SVG来动态更改产品图片的颜色使用CSS实现黑暗模式和高亮模式的切换功能CSS中元素的显示模式

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网