微信小程序 图片处理的几个样式

每天记录一点对自己来说的新内容。

 

1、外层包裹的view标签显示边框

示例：

样式：

.viewborder {
  border: 3px solid #f1bb69;
  border-radius: 10rpx;
  padding: 10rpx;
  margin: 10px;
}

2、图片边框阴影效果

示例：

样式：

.icon {
  width: 94%  !important;
  box-shadow:0 0 5px 2px #999;  
  margin:12px;
  align-items: center;/** 垂直居中*/
  display: flex;
  justify-content: center; /** flex 属性， 水平居中**/
}

wxml中：
<image class="icon" mode="widthFix" src="../images/guide/1-min.jpg"></image>

3、button按钮同列显示，并且带图片图标

示例：

样式：

wxml中：
  <button class="btn1" bindtap="toProvince">
    <image class='btnImg' src='../images/guide/sybewm-min.jpg'></image>
    <view>省入口</view>
  </button>
  <button class="btn1" bindtap="toCity">
    <image class='btnImg' src='../images/guide/sybwx-min.jpg'></image>
    <view>市入口</view>
  </button>
样式：
.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}
.btn1 {
  width: 60% !important;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.btn1::after {
  border-radius: 6px;
  border: 0; 
}