微信小程序-头像边框的几种方法设置

如图

0255D7F8-A44D-4EB9-8189-2EA2BD110F03.png

直接上代码

<!--index.wxml-->
<view class="content">
  <!-- 第一种 -->
  <view class="general first">
    <view class="general-bg first-bg"></view>
    <view class="general-cnt first-cnt"></view>
  </view>
  <!-- 第二种 -->
  <view class="general second">
    <view class="general-bg second-bg"></view>
    <view class="general-cnt second-cnt"></view>
  </view>
  <!-- 第三种 -->
  <view class="general third">
    <view class="general-bg third-bg">
      <view class="general-cnt"></view>
    </view>
  </view>
  <!-- 第四种 -->
  <view class="general four">
    <view class="general-bg">
      <view class="general-cnt four-cnt"></view>
    </view>
  </view>
</view>

/**index.wxss**/
.content {
  display: flex;
  flex-direction: row;
}
.general {
  width: 150rpx;
  height: 150rpx;
}
.general-bg {
  width: 150rpx;
  height: 150rpx;
  background-color: red;
  border-radius: 50%;
}
.general-cnt {
  width: 130rpx;
  height: 130rpx;
  background-color: blue;
  border-radius: 50%;
}
/* 第一种 */
.first {
  background-color: black;
  position: relative;
}
.first-bg {
  position: absolute;
  z-index: 100;
}
.first-cnt {
  margin-left: 10rpx;
  margin-top: 10rpx;
  position: absolute;
  z-index: 101;
}
/* 第二种 */
.second {
  background-color: yellow;
}
.second-cnt {
  margin-top: -140rpx;
  margin-left: 10rpx;
}
/* 第三种 */
.third {
  background-color: green;
}
.third-bg {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 第四种 */
.four {
  background-color: pink;
  display: flex;
}
.four-cnt {
  margin: 10rpx;
}