前言

为了实现较为独特的有别于普通圆角的UI风格，选择了超椭圆作为解决方案。

1、首先尝试用CSS实现，发现并不能做到完美的超椭圆样式。
2、查找资料后发现可以使用SVG和CSS属性实现。

SVG 绘制超椭圆

1
2
3
<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>

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>');

image1

阴影

mask遮罩会导致box-shadow属性不生效，可以使用drop-shadow`.