网店货源网,欢迎您!

微信小程序按钮边框怎么开发?

淘宝货源怎么找 2019-11-17 17:30105未知admin

  想要进行微信小程序按钮边框的设置,你需要了解按钮边框的特性、相关属性、开发代码等相关信息,所以今天小编为大家带来了详细的资料以供大家参考。

  一.按钮边框的特性

  1.语法:border:length style color

  2.style:none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset。

  

微信小程序按钮边框怎么开发?


  二.相关属性。

  1.border-width:设置边框宽度:常用取值:medium:默认值,相当于3px。thin:1px。thick:5px。不可以为负值。

  2.border-color:设置边框颜色。

  3.border-top:设置顶部边框。border-top-width,border-top-style,border-top-color 分别设置宽度,样式以及颜色

  4.border-right:设置右边框。

  5.border-bottom:设置底边框。

  6.border-left:设置左边框。

  7.border-radius:设置对象使用圆角边框。取值为数字或者百分比。

  

微信小程序按钮边框怎么开发?


  8.当然也可以给4个角单独的设置:

  左上角:border-top-left-radius,右上角:border-top-right-radius,左下角:border-bottom-left-radius,右下角:border-bottom-right-radius

  9.box-shadow:设置对象阴影。

  

微信小程序按钮边框怎么开发?


  第一个值:设置水平方向阴影偏移量。

  第二个值:设置垂直方向阴影偏移量。

  第三个值:设置对象的阴影模糊值。不允许为负值

  第四个值:设置对象的阴影外延值,不允许为负值

  第五个值:color。

  第六个值:inset,阴影在左上位置,如下图:box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurpleinset

  

微信小程序按钮边框怎么开发?


  10.border-image:对象的边框样式使用图片来填充。

  1>border-image-source:设置小程序图片的来源。使用绝对或者相对地址或者渐变色来确定图片。

  2>border-image-slice :设置边框背景图的分隔方式。取值:数值/百分比fill.该属性指定从上右下左来分割图片,将图像分成4个角,4条边以及中间区域。中间区域始终是透明的,除非使用关键字fill。

  3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。

  4>border-image-outset:设置对象的边框背景图的扩展,意思就是说假如设置了10rpx,那么图像就会在原来基础上外延10rpx在显示。

  5>border-image-repeat:设置对象的边框图片的平铺方式。

  stretch:拉伸。

  repeat:平铺,碰到边界的时候截断。

  round:根据边框的尺寸动态调整图片的大小,使得刚好可以铺满整个边框。

  space:根据边框的尺寸动态调整图片的之间的间距,使得刚好铺满整个边框。

  三.开发代码及效果

  可以生成箭头。

  [javascript] view plain copy.hd {

  content: "";

  height: 16rpx;

  width: 16rpx;

  border-width: 4rpx 4rpx 0 0;

  border-color: red;

  border-style: solid;

  transform: rotate(-45deg);

  position: absolute;

  top: 20rpx;

  left: 30rpx;

  }

  .hd:hover {

  transform: rotate(135deg);

  }

  [javascript] view plain copy

  重点是:content 设置为空

  小程序效果图:

  

微信小程序按钮边框怎么开发?


  看完以上资料,大家对于微信小程序按钮边框是不是有了更深的了解呢?参照上面的教程,就可以进行小程序按钮边框的设置了,更多资料请关注货源代理网小程序频道。

  


网店货源网 Copyright @ 网店货源网 版权所有 Power by DeDe58 备案号:宁ICP备05001262号-1

联系QQ: 625397933 邮箱地址:625397933@qq.com