在小程序来实现一个这样一个动画:查看
主要是要在头像外层套两个圆环。
一开始使用两个view嵌套,border做环,单位为rpx适配屏幕:

这样在iPhone6屏幕上是好的,但在iPhone5就成了这样子:
内外环对不齐,这个是rpx的问题。
然后想到了outline这个css属性, 但outline没法做圆角,而outline-radius不是标准,只在firefox上支持。
还有什么可以用呢,对了box-shadow是可以跟随box-radius改变形状的,但box-shadow怎么做环呢?原来box-shadow是可以多重的,像这样:box-shadow: 0 0 0 10rpx #fff, 0 0 0 10rpx blue;就可以截出来一个圆环,而且可以实现任意多个圆环而不增加元素