1 0 0

标签改渐变色 教程

修罗之家 官方团队
8天前 89

改动位置

/xn_tag/hook/header_bootstrap_before.htm

<style>
table.nav_tag_list {margin-bottom: 0.2rem;}
table.nav_tag_list td {padding: 0.3rem;}
table.nav_tag_list td a{margin-right: 0.2rem;}
.nav_tag_list .active {font-weight: normal}
.tag_option {
        border: 1px solid #bbb; padding: 1px 10px; border-radius: 10px; text-decoration: none;
}
.tag_option:active, .tag_option.active {
        border: 1px solid #000; background: #000; color: #fff; text-decoration: none;
}

/* 标签渐变色样式 */
.xn-tag.badge {
    background-image: linear-gradient(45deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.xn-tag.badge-primary {
    background-image: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%) !important;
}

.xn-tag.badge-secondary {
    background-image: linear-gradient(45deg, #84fab0 0%, #8fd3f4 100%) !important;
}

.xn-tag.badge-success {
    background-image: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%) !important;
}

.xn-tag.badge-danger {
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%) !important;
}

.xn-tag.badge-warning {
    background-image: linear-gradient(45deg, #ffecd2 0%, #fcb69f 100%) !important;
}

.xn-tag.badge-info {
    background-image: linear-gradient(45deg, #d299c2 0%, #fef9d7 100%) !important;
}

.xn-tag.badge-dark {
    background-image: linear-gradient(45deg, #e7dede00 0%, #516395 100%) !important;
}

.xn-tag.badge-light {
    background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%) !important;
}

.xn-tag.badge-white {
    background-image: linear-gradient(45deg, #c2e9fb 0%, #a1c4fd 100%) !important;
}

/* 悬停效果 */
.xn-tag.badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
</style>

 

看过的人 (8)
  • 1000
  • hechuan
  • 修罗之家
  • coco
  • 风信子
  • 笑笑
  • qscm000
  • 雨伞
最新回复 (1)
  • qscm000 DJ
    7天前
    2

    登录后可见回帖内容与附件。

    0

请先登录后发表评论!

返回
请先登录后发表评论!