<template>
<div class="demo">
<div class="stamp stamp01">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
</div>
<i></i>
</div> <div class="stamp stamp02">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
</div>
<i></i>
</div> <div class="stamp stamp03">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div> <div class="stamp stamp04">
<div class="par">
<p>XXXXXX折扣店</p>
<sub class="sign">¥</sub>
<span>50.00</span>
<sub>优惠券</sub>
<p>订单满100.00元</p>
</div>
<div class="copy">
副券
<p>
--
<br>--
</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div>
</div>
</template> <script>
export default {
data() {
return {
sampleValue: "",
value1: "",
sampleValues: ""
};
}
};
</script> <style>
.demo {
width: 410px;
}
.stamp * {
padding: ;
margin: ;
list-style: none;
font-family: "Microsoft YaHei", "Source Code Pro", Menlo, Consolas, Monaco,
monospace;
} .stamp {
width: 387px;
height: 140px;
padding: 10px;
margin-bottom: 50px; position: relative;
overflow: hidden;
}
.stamp:before {
content: "";
position: absolute;
top: ;
bottom: ;
left: 10px;
right: 10px; z-index: -;
}
.stamp:after {
content: "";
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
box-shadow: 20px 1px rgba(, , , 0.5);
z-index: -;
} .stamp i {
position: absolute;
left: %;
top: 45px;
height: 190px;
width: 390px;
background-color: rgba(, , , 0.15);
transform: rotate(-30deg);
}
.stamp .par {
float: left;
padding: 16px 15px;
width: 220px;
border-right: 2px dashed rgba(, , , 0.3);
text-align: left;
}
.stamp .par p {
color: #fff;
font-size: 16px;
line-height: 21px;
}
.stamp .par span {
font-size: 50px;
color: #fff;
margin-right: 5px;
line-height: 65px;
}
.stamp .par .sign {
font-size: 34px;
}
.stamp .par sub {
position: relative;
top: -5px;
color: rgba(, , , 0.8);
}
.stamp .copy {
display: inline-block;
padding: 21px 14px;
width: 100px;
vertical-align: text-bottom;
font-size: 30px;
color: rgb(, , );
text-align: center;
line-height: initial;
}
.stamp .copy p {
font-size: 16px;
margin-top: 15px;
}
.stamp01 {
background: #f39b00;
background: radial-gradient(
rgba(, , , ) ,
rgba(, , , ) 5px,
#f39b00 5px
);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp01:before {
background-color: #f39b00;
}
.stamp02 {
background: #d24161;
background: radial-gradient(transparent , transparent 5px, #d24161 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp02:before {
background-color: #d24161;
}
.stamp03 {
background: #7eab1e;
background: radial-gradient(transparent , 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: #;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
} .stamp04 {
width: 390px;
background: #50add3;
background: radial-gradient(
rgba(, , , ) ,
rgba(, , , ) 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: #;
font-size: 14px;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
display: block;
}
</style>

css实现礼券效果的更多相关文章

  1. css实现礼券效果2

    <template> <div class="quan clear"> <div class="quanleft"> < ...

  2. css实现礼券效果3

    <view class="coupon"> <view class="coupon-left"> </view> <v ...

  3. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  4. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  7. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  8. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  9. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

随机推荐

  1. (一)Knockout 计算属性

    1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text ...

  2. mysql case when * else end

    分条件计算总数 SELECT -- SUM( END) as am, -- SUM( END) as om , -- SUM( END) as aom , -- SUM( then AmoutPric ...

  3. Java Spring Boot VS .NetCore (一)来一个简单的 Hello World

    系列文章 Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filte ...

  4. 我的 Putty 配色方案

    首先,右键单击 Putty 顶部边框,在弹出菜单中选择 Change settings,进入颜色设置 Category->Window->Colours 然后,按以下参数配置进行修改: D ...

  5. [Python]Python中的浅复制与深复制

    看python的文档,发现list有copy方法,描述说效果同a[:]. 感觉有点惊讶,之前一直以为a[:]执行的是深复制. test了一下,发现确实如果a中存在可变对象,如list/set/dict ...

  6. composer install 时遇到 Composer\Downloader\TransportException ...

    安装错误 [Composer\Downloader\TransportException] Invalid credentials for 'https://packagist.phpcomposer ...

  7. 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...

  8. 双接口(回调)promise cb

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Linux bash基础特性一

    命令别名 alias cdnet=”cd /etc/sysconfig/network-scripts” 针对用户的别名: “~/.bashrc” 针对系统的别名:”/etc/bashrc” 重读配置 ...

  10. (72)Wangdao.com第十二天_JavaScript 错误处理机制

    1. Error 实例对象 JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象. JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例. va ...