小程序中实现酷炫的标签效果

小程序中实现酷炫的标签效果

  •  2018 年 12 月 14 日
  •  394
  •  小程序 CSS 

先看下效果图


WXSS样式

/* tag  begin */

.tag-wrapper {
    padding: 40rpx 0 60rpx;
    margin: 0 50rpx 0 60rpx;
    text-align: center;
}

.tag-wrapper .tag, .tag-wrapper .tag:before {
    background-color: #b7b7b7;
}

.tag-wrapper .tag, .tag-wrapper .tag:after, .tag-wrapper .tag:before {
    border-color: #777;
}

.tag-wrapper .tag-warning, .tag-wrapper .tag-warning:before {
    background-color: #f90;
}

.tag-wrapper .tag-warning, .tag-wrapper .tag-warning:after,
.tag-wrapper .tag-warning:before {
    border-color: #f90;
}

.tag-wrapper .tag-success, .tag-wrapper .tag-success:before {
    background-color: #19be6b;
}

.tag-wrapper .tag-success, .tag-wrapper .tag-success:after,
.tag-wrapper .tag-success:before {
    border-color: #19be6b;
}

.tag-wrapper .tag-primary, .tag-wrapper .tag-primary:before {
    background-color: #2d8cf0;
}

.tag-wrapper .tag-primary, .tag-wrapper .tag-primary:after,
.tag-wrapper .tag-primary:before {
    border-color: #2d8cf0;
}

.tag-wrapper .tag-error, .tag-wrapper .tag-error:before {
    background-color: #ed3f14;
}

.tag-wrapper .tag-error, .tag-wrapper .tag-error:after,
.tag-wrapper .tag-error:before {
    border-color: #ed3f14;
}

.tag-wrapper .tag-dark, .tag-wrapper .tag-dark:before {
    background-color: #1c2438;
}

.tag-wrapper .tag-dark, .tag-wrapper .tag-dark:after,
.tag-wrapper .tag-dark:before {
    border-color: #1c2438;
}

.tag-wrapper .tag-grey, .tag-wrapper .tag-grey:before {
    background-color: #80848f;
}

.tag-wrapper .tag-grey, .tag-wrapper .tag-grey:after,
.tag-wrapper .tag-grey:before {
    border-color: #80848f;
}

.tag-wrapper .tag {
    display: inline-block;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    font-size: 20rpx;
    line-height: 50rpx;
    height: 50rpx;
    padding: 0 40rpx;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    text-decoration: none;
    border: 1px solid;
    border-left: 0;
    color: #fff;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.12)), color-stop(99%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1fffffff', endColorstr='#1a000000', GradientType=0);
}

.tag-wrapper .tag:before {
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.12)), color-stop(99%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.1) 100%);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
    box-shadow: 1rpx 0px 0 rgba(255, 255, 255, 0.5) inset;
    content: '';
    height: 36rpx;
    left: -20rpx;
    position: absolute;
    top: 7rpx;
    width: 36rpx;
    border: 1rpx solid;
    border-right: 0;
    border-top: 0;
}

.tag-wrapper .tag:after {
    position: absolute;
    background: #fff;
    content: '';
    width: 10rpx;
    height: 10rpx;
    left: 0;
    border-radius: 10rpx;
    top: 18rpx;
    border: 1px solid #888;
}

/* tag  end */

WXML代码

<view class="tag-wrapper">
    <view class="tag tag-primary">90后</view>
    <view class="tag tag-error">程序猿</view>
    <!-- more ...... -->
</view>

扫一扫分享到微信

已有 条评论
写评论