css 券常用样式：小圆圈遮住券一部分样式实现

如图，外部box有阴影，样式为：
box-shadow: 0 2px 12px 0 rgba(236,138,102,0.50);
页面背景色为：

f5f5f5

怎样实现这种小圆遮住box一部分且阴影比较自然，我实现的效果总是不太符合UI小姐姐的预期

这是实现的效果图

阅读 7.8k

然而这种一般都是切图，图片作为卡券的box的背景图,因为卡券有时候不仅有这种半圆的缺口还有锯齿状的边缘，写还不得写死。
如下图1
图片描述

这是我们用的卡券的某个部分的切图，半圆缺口和锯齿状的东西切成透明的就行。
我找了个左右缺口的卡券图片，把阴影写在了左边

<!DOCTYPE html>
<html>
<head>
  <title>阴影</title>
  <style>
    #coupon {
      width: 340px;
      height: 88px;
      margin: 100px auto;
      background: url("img/coupon.png") 0 0 repeat;
      background-size: 100% 100%;
      position: relative;
    }
    #coupon::before {
      width: 100px;
      height: 88px;
      content: '';
      position: absolute;
      left: -14px;
      top: 0;
      z-index: -1;
      background: linear-gradient(to left, rgba(236,138,102,0.50), white);
    }
  </style>
</head>
<body>
<div>
  <div id="coupon">

  </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

效果图如下图：你自己调下阴影的颜色即可(截图上看上去有个细线的，是压缩图片的原因，你放大看就行了

图片描述

css 券常用样式：小圆圈遮住券一部分样式实现

f5f5f5

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

css如何设置纵向滚动条的高度？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

css 券常用样式：小圆圈遮住券一部分 样式实现

f5f5f5

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

css如何设置纵向滚动条的高度？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

css 券常用样式：小圆圈遮住券一部分样式实现