css实现礼券效果2

<template><div class="quan clear"><div class="quanleft"><p class="ft">折扣券</p></div><div class="quanRight"><p class="money">¥ 10</p><p class="tit">美味立享折扣券</p><p class="conts">无满额限制,立减折扣</p><p class="dates">有效期: 2018.8.12 - 2019.8.12</p></div></div>
</template><script>
export default {};
</script><style>
.quan {position: relative;width: 96%;height: 130px;margin: 5% auto;padding: 6px;padding-right: 0;box-sizing: border-box;background-color: #ff6347;color: #fff;/*左边的波浪*/background-image: radial-gradient(#fff 35%, #ff6374 35%);background-size: 17px 17px;background-position: -9px 0;background-repeat: repeat-y;
}
.clear::after {content: "";display: block;clear: both;
}.quanLeft {float: right;width: 30%;height: 100%;padding: 10px;box-sizing: border-box;
}
.quanRight {position: absolute;top: 0;right: 0;bottom: 0;box-sizing: border-box;width: 70%;padding: 12px;text-align: center;border-left: 1px dashed #ccc;background-image: radial-gradient(#fff 35%, #ff6374 35%);background-size: 17px 17px;background-position: 109% 0;background-position: calc(100% + 9px) 0;background-repeat: repeat-y;
}
.money {margin-bottom: 6px;margin-right: 8px;font-size: 26px;font-weight: bold;line-height: 1.6;
}
.tit {font-size: 17px;
}
.conts {font-size: 13px;
}
.dates {font-size: 12px;
}
.ft {display: inline-block;margin: 40px;
}
</style>

转载于:https://www.cnblogs.com/huanhuan55/p/10775361.html

css实现礼券效果2相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
[css] 用css实现倒影的效果
[css] 用css实现倒影的效果 box-reflect 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 使用css实现彩虹的效果
[css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
[css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
前端开发认识css 体验变色的效果 0228
css的功能没有css的html 有了css后的网页效果只有html的网页只有内容主体当html加上了css后对主体内容有了一个修饰更好看了关于css 小试一下让文字变红更改按钮样式 ...

css实现礼券效果2

css实现礼券效果2相关推荐

最新文章

热门文章