用css怎么做卡券？一文教你实现几种样式

发布时间：2022-01-12 06:29:32 所属栏目：语言来源：互联网

导读：用css怎么做卡券？现在很多网站或者购物商场都会推出优惠卡或者礼品券等等这些，而实现这些卡券效果其实并不难，下面就给大家分享一下怎样使用CSS实现多种样式的额卡券。常见的卡券样式如下：使用伪元素实现（Less 版本） ticket.less .ordinary-mixins-

　　用css怎么做卡券？现在很多网站或者购物商场都会推出优惠卡或者礼品券等等这些，而实现这些卡券效果其实并不难，下面就给大家分享一下怎样使用CSS实现多种样式的额卡券。

　　常见的卡券样式如下：

　　
　　使用伪元素实现（Less 版本）

　　ticket.less

　　.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
　　 position: relative;
　　 box-sizing: border-box;
　　 padding: 0 @r;
　　 width: @width;
　　 height: @height;
　　 background-clip: content-box;
　　 background-color: @color;

　　 &::before {
　　    position: absolute;
　　    top: 0;
　　    left: 0;
　　    content: "";
　　    display: block;
　　    width: @r + 1px;
　　    height: 100%;
　　    background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);
　　 }

　　 &::after {
　　    position: absolute;
　　    top: 0;
　　    right: 0;
　　    content: "";
　　    display: block;
　　    //这里的 @r + 1px 是为了避免某些百分百比缩放页面时，出现空隙
　　    width: @r + 1px;
　　    height: 100%;
　　    //这里的 @r + 1px 是为了防止出现锯齿
　　    background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
　　 }
　　}

　　.parent {
　　 .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
　　}
　　.child {
　　 line-height: 200px;
　　}
　　App.js

　　import React from 'react';
　　import './App.css';
　　import './ticket.less';

　　function App() {
　　    return (
　　        <div className="App" style={
　　            {
　　                display: "flex",
　　                justifyContent: "center",
　　                alignItems: "center",
　　                height: 600
　　            }
　　        }>
　　            <div className={'parent'}>
　　                <div className="child">666</div>
　　            </div>
　　        </div>
　　    );
　　}

　　export default App;
　　升级版样式一（Less 版本）

　　.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
　　 width: @width;
　　 height: @height;
　　 // @left - 1px 是为了避免某些百分百比缩放页面时，出现空隙
　　 // @r + 1px 是为了防止出现锯齿
　　 // 51% 是为了防止出现元素中间会有一小段空白区域的情况
　　 background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,
　　 radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,
　　    radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,
　　    radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

　　 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
　　}

　　.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
　　 width: @width;
　　 height: @height;
　　 // @left + 1px 是为了避免某些百分百比缩放页面时，出现空隙
　　 // @r + 1px 是为了防止出现锯齿
　　 // 51% 是为了防止出现元素中间会有一小段空白区域的情况
　　 background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) right top ~'/' (@width - @left) 51% no-repeat,
　　 radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) right bottom ~'/' (@width - @left)   51% no-repeat,
　　 radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) left top ~'/' @left + 1px 51% no-repeat,
　　 radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) left bottom ~'/' @left + 1px   51% no-repeat;

　　 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
　　}

　　.parent {
　　 .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
　　 //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
　　}
　　.child {
　　 line-height: 200px;
　　}
　　升级版样式一（Scss 版本）

　　@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {
　　 width: $width;
　　 height: $height;
　　 // $left - 1px 是为了避免某些百分百比缩放页面时，出现空隙
　　 // $r + 1px 是为了防止出现锯齿
　　 // 51% 是为了防止出现元素中间会有一小段空白区域的情况
　　 background: radial-gradient(circle at left top, transparent $r, $l-color $r + 1px) $left - 1px top / 100% 51% no-repeat,
　　 radial-gradient(circle at left bottom, transparent $r, $l-color $r + 1px) $left - 1px bottom / 100% 51% no-repeat,
　　 radial-gradient(circle at right top, transparent $r, $r-color $r + 1px ) -($width - $left) top / 100% 51% no-repeat,
　　 radial-gradient(circle at right bottom , transparent $r, $r-color $r + 1px ) -($width - $left) bottom / 100% 51% no-repeat;

　　 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
　　}

　　.parent {
　　 @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
　　}

　　.child {
　　 line-height: 200px;
　　}
　　升级版样式二（Less 版本）

　　.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
　　 width: @width;
　　 height: @height;
　　 background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,
　　 radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,
　　 radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,
　　 radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;

　　 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
　　}

　　.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
　　 width: @width;
　　 height: @height;
　　 background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) left bottom ~'/' 51% (@height - @top) no-repeat,
　　 radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left top ~'/' 51% @top + 1px no-repeat,
　　 radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right bottom ~'/' 51% (@height - @top) no-repeat,
　　 radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) right top ~'/' 51% @top + 1px no-repeat;

　　 filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
　　}

　　.parent {
　　 .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
　　 //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
　　}
　　.child {
　　 line-height: 200px;
　　}

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

C++ search_n 函数用法	GDB print和display命
行逻辑链接的顺序表压	回看算法详解