前言
为了实现较为独特的有别于普通圆角的UI风格,选择了超椭圆作为解决方案。
1、首先尝试用CSS实现,发现并不能做到完美的超椭圆样式。
2、查找资料后发现可以使用SVG和CSS属性实现。
SVG 绘制超椭圆
1 | <svg viewBox="3.5 3.5 165 165" xmlns="http://www.w3.org/2000/svg"> |
CSS使用SVG遮罩
mask 可以使用SVG图形来作为一个遮罩。
1 | mask-image: url('data:image/svg+xml;utf8,<svg viewBox="3.5 3.5 165 165" xmlns="http://www.w3.org/2000/svg"><path d="M86,4 C116.191566,4 136.63658,9.48730185 149.574639,22.4253609 C162.512698,35.3634199 168,52.808434 168,86 C168,116.191566 162.512698,136.63658 149.574639,149.574639 C136.63658,162.512698 116.191566,168 86,168 C55.8084337,168 35.3634199,162.512698 22.4253609,149.574639 C9.48730185,136.63658 4,116.191566 4,86 C4,55.8084337 9.48730185,35.3634199 22.4253609,22.4253609 C35.3634199,9.48730185 55.8084337,4 86,4 Z"/></svg>'); |
阴影
mask
遮罩会导致box-shadow属性不生效,可以使用
drop-shadow`.