New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

优惠券中的凹角和锯齿边 #28

Open
jerryni opened this Issue Jun 2, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@jerryni
Copy link
Owner

jerryni commented Jun 2, 2018

在开发优惠券组件的过程中,遇到两种复杂的样式,凹角锯齿边。下面就跟大家讲解一下实现方案。

sketch

凹角

结论就是需要使用radial-gradient来实现;

从css魔法哥的文章可以理解radial-gradient生成一个圆圈的原理。

简单说是这样的:先了解linear-gradient的渐变原理,2个不同的颜色在某段区间上会生成一段渐变,但是如果这段区间的颜色一样就不会有渐变,而是生成一片颜色块。 就像这样:background: linear-gradient(red 50%, blue 50%, blue) 另一种hack写法background: linear-gradient: red 50%, blue 0; ,这种写法注意点就是后面的值只要比50%小就行了,比如20%,所以设置成0更稳。 这样只会有2种颜色,红色50%, 蓝色50%。transparent也可用。

然后通过上面的渐变原理,再加上radial-gradient的圆形特性,变可以生成一个任意颜色的圆圈。

再扩展到四个角:通过radial-gradient的第一个参数,可以设置圆心的位置为4个角。 可以参考这个demo,这个demo通过内凹角实现了凹角边框。

锯齿边

锯齿边的处理,可以利用border-style: dotted + 绝对定位 + 融合背景颜色来实现,这个方式的缺点就是需要border颜色和背景一致。具体可以参考这篇文章,或这个简化demo

@cssmagic

This comment has been minimized.

Copy link

cssmagic commented Sep 21, 2018

锯齿边似乎也可以用 radial-gradient 来实现,可以做到真透明。比如参考《CSS 揭秘》中 “波点图案” 的实现。

@jerryni

This comment has been minimized.

Copy link
Owner

jerryni commented Oct 23, 2018

@cssmagic 恩,也试了一下,效果都不大理想,最后在产品的yin威下还是用了切图👽

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment