文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中怎么使用径向渐变实现卡券效果

2023-06-08 03:15

关注

这篇文章将为大家详细讲解有关CSS中怎么使用径向渐变实现卡券效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

常见的卡券样式如下:

CSS中怎么使用径向渐变实现卡券效果 

使用伪元素实现(Less 版本)

CSS中怎么使用径向渐变实现卡券效果

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 版本)

CSS中怎么使用径向渐变实现卡券效果

.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 版本)

CSS中怎么使用径向渐变实现卡券效果

.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;}

升级版样式三(Less 版本)

CSS中怎么使用径向渐变实现卡券效果

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-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));  &::after {    position: absolute;    left: 0;    right: 0;    top: @top;    margin: auto;    content: '';    width: calc(~"100%" - 2*@r - @border-offset);    border-top: 1px dashed @border-color;  }}.parent {  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);}.child {  line-height: 200px;}

升级版样式四(Less 版本)

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-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));  &::after {    content: '';    position: absolute;    top: 0;    right: -@sm-r;    width: @sm-r;    height: 100%;    background-image: radial-gradient(circle at @sm-r, transparent @sm-r, @r-color @sm-r + 1px);    //background-size: @sm-r;    background-size: @sm-r @sm-offset;  }}.parent {  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);}.child {  line-height: 200px;}

注意事项

// ticket.less//background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;// 将上面的这行代码拆解如下://background-image: radial-gradient(circle at top right, transparent @r, @lcolor 0);//background-position:-(@width - @left) top ;//background-size:100% 55% ;//background-repeat: no-repeat;

关于“CSS中怎么使用径向渐变实现卡券效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯