技術標籤：微信小程式小程式

每天記錄一點對自己來說的新內容。

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; 
}