(本文不是广告,因为没给钱。)我厂 code.fun 上线了付费购买与优惠券功能,欢迎各位新老顾客莅临。
上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它,希望对大家有帮助。
0. 分析
首先,我们来分析一下这个优惠券的实现方案。
左边是摘要,右边是详情,这个部分用 display:flex
很容易就能搞定。中间的虚线,使用任意一个容器边框 + 少许 padding
即可实现。其它部分,也就是些字体行高,都不是很复杂。难点在于投影,尤其是左右两个挖空的半圆。
1. 挖空
- 首先,我们给整个优惠券矩形加上投影
- 然后,我们给两边加上两个包含内投影的圆形
- 这个时候,两边的内投影原型会多出来一块,我们需要把它们盖住。但是,不能让矩形
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. 总结
到这里,效果就基本让人满意了。
最终完成的代码可以在 codepen 里看到:
https://codepen.io/meathill/embed/oNqxOXE?default-tab=html%2Cresult&editable=true
使用纯 CSS 的好处,在于体积小、加载快,调整起来非常灵活,能用 CSS 最好都用 CSS。
有任何问题和建议,欢迎评论、讨论。
发表回复