小程序圆角按钮

• 圆角线框按钮

.round-line-button {
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #666666;
  border: 1rpx solid #bbbbbb;
}

• 圆角填充按钮（图片填充）

.round-image-button {
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-repeat: no-repeat;
  background-image:url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCeRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAARAAAAWodpAAQAAAABAAAAbAAAAAAAAABIAAAAAQAAAEgAAAABQWRvYmUgSW1hZ2VSZWFkeQAAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAMigAwAEAAAAAQAAADkAAAAA/8AAEQgAOQDIAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAQEBAQEBAgEBAgMCAgIDBAMDAwMEBgQEBAQEBgcGBgYGBgYHBwcHBwcHBwgICAgICAkJCQkJCwsLCwsLCwsLC//bAEMBAgICAwMDBQMDBQsIBggLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLC//dAAQADf/aAAwDAQACEQMRAD8A+sKKKK/VD8/CiiigAooooAKKKeq560ACLk1ciipYoyTWlDFUtlpBDD7VrW8BOOKW3t81t29vjFQ2UkLb2+K2re3zRbwZroLa14yaybNEgtrXpXQW9tSW1tz0rft7bpWUpFpBbW2O1btvbetFvb9zW3BB2FYykaRiEFvjitq3t880W9v0rZhhrJs0CGGtOGKliirQRABWbZaQImOTUlFFSMKKKKAP/9D6wooor9UPz8KKKKACiinKu6gBVQk81djizSRR1qQxe1JstIIYvatWCAmlggz2rct7fFZt2KSuFvbgVt29vmi3tya6C1tTWTZokJa23tXQW9t7UW9vnFb1tbYrKUi0hba2Fblvb98UW9v0zW5b2/asZSNYxEgg6VtwW9EFvWxDDismywhhxWpDFRFFWgiAc1m2WkCJgc1JRRUjCiiigAooooA//9H6wooor9UPz8KKKeqE8mgAVC1Xoos9aSKM1pww1LZaQQw1r28GecUkEBJHFbtvbiobKSEt7fA6Vt29vuogt8ngV0FrbY5IrJyNEgtrXvW/b2/tS21tk4retrb2rJyLSC2tvat23tvai3t+hxW3BAeKxlI0UQgt+mK2reDuaLe3zg1sQw1k2aBDDWpDFSxRYq/Gm0Vm2WkEabRmpKKKkYUUUUAFFFFABRRRQB//0vrCiiiv1Q/Px6qTzV2KL1qCPqK0k60mUkWIYa14Lc1Vi7VuW1ZtlotW9vjtW3BbknAFU4egrctOorKTNEaFra4rft7eqVr0Fb1v1rJssvW1vjpW7b2+aowdBW/bdBWMmaJFqC3zjitq3g9RVS2+8K2bfpWbZoWooa04oqrw9vwrSi/rWUi0iZIwo5qSiipGFFFFABRRRQAUUUUAFFFFAH//2Q==');
}

• 设置view的图片背景

.content {
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-repeat: no-repeat;
  background-image: url('https://www.demo.com/upload/50945da66c773f5.png');
}

需要注意的是在wxss中设置background-image的时候不能用本地路径，只能用网络连接或者base64。如果要用本地路径，需要在wxml中的style中设置。

<view class="content-back" style="background-image: url('../../images/image01.png');"></view>

可以用在线工具将图片转为base64

http://tool.chinaz.com/tools/imgtobase