微信小程序开发详解（十）---微信小程序样式基础

样式属性为如下内容：

1 尺寸

2 背景

3 边框

4 边距

5 文本

6 其他(列表，内容，表格)

index.wxml代码如图1所示：里面<image />标签（显示微信用户头像），定义class="userinfo-avatar"，因此在index.wxss中通过 .userinfo-avatar可以设置用户头像组件的样式。



图1

1：尺寸

可以在index.wxss中，如下代码中的：width，height等属性设置头像image组件的宽高尺寸，同时也可以使用 max-height，min-height，max-width，min-width等属性设置image组件的最大，最小宽高。

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

2：边框

可以在index.wxss中，如下代码设置头像image组件的边框宽（border-width），边框颜色（[b] border-color[/b]），边框样式（ [b]border-style[/b]），边框角度（ border-radius），编译并运行，效果如图2所示

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

max-height: 200rpx;

min-height: 10rpx;

max-width: 200rpx;

min-width: 10rpx;

border-radius: 50%;

border-width: 30rpx;

border-color:beige;

border-style:solid; //边缘为实心

}



图2