jjzjj

如何用纯 CSS 实现优惠券效果

CodeFunTeam 2024-04-19 原文

​

背景

本文来自CODE.FUN  ，讲述如何用纯 CSS 实现优惠券效果的实践案例，分享给大家。

优惠券视觉效果

上面是优惠券的视觉效果，本文分享如何使用纯 CSS 实现它的主要框架，希望对大家有帮助。

0. 分析

首先，我们来分析一下这个优惠券的实现方案。

左边是摘要，右边是详情，这个部分用 display:flex 很容易就能搞定。中间的虚线，使用任意一个容器边框 + 少许 padding 即可实现。其它部分，也就是些字体行高，都不是很复杂。难点在于投影，尤其是左右两个挖空的半圆。

1. 尝试实现挖空效果

  1. 首先，我们给整个优惠券矩形加上投影

  2. 然后，我们给两边加上两个包含内投影的圆形

  3. 这个时候，两边的内投影原型会多出来一块，我们需要把它们盖住。但是，不能让矩形 overflow:hidden，因为投影也会变，如下图。

中间效果

.coupon {
  width: 15rem;
  height: 6rem;
  background: white;
  box-shadow: 1px 1px 6px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  
  &::before,
  &::after {
    background-color: white; 
    border-radius: 1rem;
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.15);
    content: '';
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 2rem;
    z-index: 1;
  }  

  &::before {
    left: -1rem;
  }
  &::after {
    right: -1rem;
  }
}

2. 增加父容器

我的第一反应是增加父容器，让父容器 overflow:hidden 来隐藏多出来的部分。但是不行，会影响投影。

但是转念一想，我们可以不让父容器限制显示内容，而是在父容器内部增加一些元素，遮蔽多出来的内容。比如用两个纯色圆形，把竖着的阴影遮起来。

于是我把上面的样式更名为 .coupon-inner，然后增加一个父容器。父容器的 ::before ::after 伪元素都搞成略小一圈的纯色圆形，把竖着的投影挡住，最终效果如下图。

接近最终效果

3. 总结

到这里，效果就基本让人满意了。最终完成的代码如下：

.coupon {
  width: 15rem;
  height: 6rem;
  position: relative;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: calc(2rem + 2px);
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    background-color: white;
    z-index: 2;
  }  

  &::before {
    left: -1rem;
    border-radius: 0 calc(1rem - 2px) calc(1rem - 2px) 0;
  }

  &::after {
    right: -1rem;
    border-radius: calc(1rem - 2px) 0 0 calc(1rem - 2px);
  }
}

.coupon-inner {
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 1px 1px 6px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
  
  &::before,
  &::after {
    background-color: white; 
    border-radius: 1rem;
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.15);
    content: '';
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 2rem;
    z-index: 1;
  }

  &::before {
    left: -1rem;
  }

  &::after {
    right: -1rem
  }
}

你也可以在 codepen 里做进一步的调整：

前往 CodePen

使用纯 CSS 的好处，在于体积小、加载快，调整起来非常灵活。我们建议前端开发者，能用 CSS 最好都用 CSS。

有任何问题和建议，欢迎评论、讨论。

何用CSSxff0cxff0xff前端ui

有关如何用纯 CSS 实现优惠券效果的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  7. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  8. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  9. ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2

    在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

  10. ruby-on-rails - 如何用不同的用户运行nginx主进程 - 2

    A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？ 最佳答案 只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(

随机推荐