位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 小程序应用
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 基础语法 下一篇: 外边距

根据基础的语法,下面在微信小程序中实现如何定义组件的边框。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  <view>默认文本,不带边框</view>
</view>
 
<view>
  <view>默认文本,带边框</view>
</view>
 
<view>
  <view>默认文本,分别定义</view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.cls1{
  width: 100px;
  height: 100px;
  background-color:gainsboro;
  margin: 10px;/*外边距*/
}
.cls2{
  width: 100px;
  height: 100px;
  background-color:gainsboro;
  margin: 10px;/*外边距*/
  border: 1px dotted black; /*所有属性定义在一起*/
}
.cls3{
  width: 100px;
  height: 100px;
  background-color:gainsboro;
  margin: 10px; /*外边距*/
  border-style:  solid; /*分别定义:样式*/
  border-width:  5px;   /*分别定义:宽度*/
  border-color:  red;   /*分别定义:颜色*/
}

效果如图4-5所示

image.png

上一篇: 基础语法 下一篇: 外边距
毕业设计网             广告联系QQ:45157718(微信同号)