再软件开发时，根据设计图在上传证件照时候，需要再选择框的上下左右四个角上画一个效果，切图容易模糊，切增加带宽消耗，利用锋利的css3伪类实现的笔记。

实现效果如图：

html部分代码

<view class="item">
			<view class="name">
				<view class="title">身份证正面照(选传)</view>
				<view class="desc">上传签约的身份证正面照</view>
			</view>
			<view class="pannel">
				<view class="panel-footer">
					<uploader  @after-read="afterRead($event,'front_card_image')" useSlot >
						<image class="user-image" :src="form.front_card_image || require('../../../static/images/idcard-p.png')" />
					</uploader>
				</view>
			</view>
		</view>

css3部分代码

.pannel {
				 width: 300rpx;
				 height: 160rpx;
			     position: relative;
			     border: 2rpx solid rgba(25, 186, 139, 0.17);
			     &::before {
			         position: absolute;
			         top: 0;
			         left: 0;
			         content: "";
			         width: 20rpx;
			         height: 20rpx;
			         border-top: 4rpx solid #236030;
			         border-left: 4rpx solid #236030;
			       }
			       &::after {
			         position: absolute;
			         top: 0;
			         right: 0;
			         content: "";
			         width: 20rpx;
			         height: 20rpx;
			         border-top: 4rpx solid #236030;
			         border-right: 4rpx solid #236030;
			       }
			       .panel-footer{
			         position: absolute;
			         left: 0;
			         bottom: 0;
			         width: 100%;
			         &::before {
			           position: absolute;
			           bottom: 0;
			           left: 0;
			           content: "";
			           width: 20rpx;
			           height: 20rpx;
			           border-bottom: 4rpx solid #236030;
			           border-left: 4rpx solid #236030;
			         }
			         &::after {
			           position: absolute;
			           bottom: 0;
			           right: 0;
			           content: "";
			           width: 20rpx;
			           height: 20rpx;
			           border-bottom: 4rpx solid #236030;
			           border-right: 4rpx solid #236030;
			         }
			       }
			}