小程序圆角按钮

最新推荐文章于 2022-12-09 09:02:03 发布

原创

最新推荐文章于 2022-12-09 09:02:03 发布 · 960 阅读

2 ·

CC 4.0 BY-SA版权

圆角线框按钮

.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//EALUQAAI