博客

下面是用小程序写的，其实html实现效果也一样，不过在实现的时候对于方式1和方式2 存在一个问题就是当我把小程序的机型改变为iPhone 6 plus的时候会存在中间的圆圈不居中，最后我采用第三种方式就解决了该问题，我看方式1和方式2其实代码没有什么问题，但是换了机型显示的效果就是这样，最后也不知道咋回事，感觉是兼容问题。

1. 两个标签嵌套

<view class="circle">
    <view class="child"></view>
</view>

  .circle{
      width: 24rpx;
      height: 24rpx;
      background-image: linear-gradient(to bottom, #FFE75A, #FFD100);
      border-radius: 50%;
  }
  .child{
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #fff;
      position: relative;
      top: 6rpx;
      left: 6rpx;
  }

3. 使用伪元素before，after（下面写before和after效果一样）

      <view class="circle"></view>

.circle{
      width: 24rpx;
      height: 24rpx;
      background-image: linear-gradient(to bottom, #FFE75A, #FFD100);
  	  border-radius: 50%;
      margin-left: 6rpx;
  }
  .circle:after{
      content: "";
      display: block;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #fff;
      position: relative;
      top: 6rpx;
      left: 6rpx;
  } 

4. 使用padding，同样也是需要两个标签嵌套

      <view class="circle">
        <view class="child"></view>
      </view>

  .circle { 
      width: 24rpx; 
      height: 24rpx; 
      box-sizing: border-box; 
      padding: 6rpx; 
      border-radius: 50%; 
      background-image: -webkit-linear-gradient(top, #FFE75A, #FFD100);  
      background-image: -moz-linear-gradient(top, #FFE75A, #FFD100); 
      background-image: linear-gradient(top, #FFE75A, #FFD100);  
      margin-left: 6rpx;
  }
  .child { 
      width:100%; 
      height:100%; 
      border-radius:50%; 
      background:#fff; 
  }

在这里用到了一个渐变色，这里要注意的是background-image这个属性，而不是background-color，linear-gradient(direction, color-stop1, color-stop2, …);第一个参数是方向，没有写的时候默认从上到下。

background-image: linear-gradient(top, #FFE75A, #FFD100);