CSS--设置半透明边框

需求：设置一个半透明的边框,其关键时使用background-clip属性，但是在真机预览时，小程序中边框不显示

使用 background-clip: padding-box;可实现。

background-clip  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

.camera-icon {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 30rpx solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255);
    background-clip: padding-box;
}

问题：背景色和边框色一样时，小程序中边框显示不了

设置rgb不是白色

background-color: #fff;
border: 30rpx solid rgba(223, 61, 61, 0.35);
background-clip: padding-box;

设置都是rgb和color都是255, 0, 0（red）

border: 30rpx solid rgba(255, 0, 0, 0.35);
background-color: rgb(255, 0, 0);
background-clip: padding-box;

结论：两个色值不能一样

解决：两个div

//html
<cover-view class="camera-icon" @tap="takePhotoAction">
    <cover-view class="camera-icon-center"></cover-view>
</cover-view>

//css
.camera-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
}

.camera-icon-center {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background-color: #ffffff;
}

效果图：

• CSS小技巧---半透明边框