查看“模板:角色图鉴展示/个”的源代码

<includeonly><div class="unit-icon unit-icon-{{{2|}}}-{{#switch:{{{3|}}}|火=fire|风=wind|雷=thunder|水=water|光=light|暗=dark|none}}">[[file:{{{1|}}}.png|54px|{{{1|}}}|link={{{1|}}}]]<div class="leftdown-white-text">[[{{{1|}}}|{{#rreplace:{{#rreplace:{{{1|}}}|[（\(]|&nbsp;}}|[）\)]|}}]]</div></div></includeonly><noinclude>{{角色图鉴展示/个|雷吉斯|4|雷}}{{角色图鉴展示/个|米娅（泳装）|5|火}}{{角色图鉴展示/个|阿克塞姆|3|光}}{{角色图鉴展示/个|蓝波露|1|水}}{{角色图鉴展示/个|梅利露(圣诞)|3|暗}}{{角色图鉴展示/个|可可萝|5|风}}{{角色图鉴展示/个|波吉特|2|风}}
==标题==
<!--本页面使用的css，可删除-->
{{#css:
.unit-icon {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin: 2px;
    overflow: hidden;
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}
.leftdown-white-text {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
    color: #fff;
    font-weight: bolder;
    text-shadow: #000 -1px 0 0, #763c12 0 -1px 0, #5d2b08 1px 0 0, #1d1515 0 1px 0;
    height: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 14px;
    padding: 2px 4px;
}
.leftdown-white-text a:link {
    color: #fff;
}
.leftdown-white-text a:visited {
    color: #fff;
}
.unit-icon-5-fire {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #ea354c 30%, #ea354c 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-wind {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #77d930 30%, #77d930 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-thunder {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #ffd71c 30%, #ffd71c 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-water {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #448aff 30%, #448aff 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-light {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #b7bf9c 30%, #b7bf9c 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-dark {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #5a3a60 30%, #5a3a60 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-5-none {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #a1cbd4, #b14c90 1%, #c9e7f1, #60deed, #77edab, #edfd51, #f9f444 29%, #df9c56 30%, #646464 30%, #646464 70%, #df9c56 70%, #f9f444, #edfd51, #77edab, #60deed, #c9e7f1, #b14c90 99%, #a1cbd4);
}
.unit-icon-4-fire {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ea354c 70%, #f9f444 70%);
}
.unit-icon-4-wind {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #77d930 70%, #f9f444 70%);
}
.unit-icon-4-thunder {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ffd71c 70%, #f9f444 70%);
}
.unit-icon-4-water {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #448aff 70%, #f9f444 70%);
}
.unit-icon-4-light {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #b7bf9c 70%, #f9f444 70%);
}
.unit-icon-4-dark {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #5a3a60 70%, #f9f444 70%);
}
.unit-icon-4-none {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #646464 70%, #f9f444 70%);
}
.unit-icon-3-fire {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ea354c 70%, #c9e7f1 70%);
}
.unit-icon-3-wind {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #77d930 70%, #c9e7f1 70%);
}
.unit-icon-3-thunder {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ffd71c 70%, #c9e7f1 70%);
}
.unit-icon-3-water {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #448aff 70%, #c9e7f1 70%);
}
.unit-icon-3-light {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #b7bf9c 70%, #c9e7f1 70%);
}
.unit-icon-3-dark {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #5a3a60 70%, #c9e7f1 70%);
}
.unit-icon-3-none {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #646464 70%, #c9e7f1 70%);
}
.unit-icon-2-fire {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ea354c 75%, #df9c56 75%);
}
.unit-icon-2-wind {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #77d930 75%, #df9c56 75%);
}
.unit-icon-2-thunder {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ffd71c 75%, #df9c56 75%);
}
.unit-icon-2-water {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #448aff 75%, #df9c56 75%);
}
.unit-icon-2-light {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #b7bf9c 75%, #df9c56 75%);
}
.unit-icon-2-dark {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #5a3a60 75%, #df9c56 75%);
}
.unit-icon-2-none {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #646464 75%, #df9c56 75%);
}
.unit-icon-1-fire {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ea354c 75%, #77edab 75%);
}
.unit-icon-1-wind {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #77d930 75%, #77edab 75%);
}
.unit-icon-1-thunder {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #ffd71c 75%, #77edab 75%);
}
.unit-icon-1-water {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #448aff 75%, #77edab 75%);
}
.unit-icon-1-light {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #b7bf9c 75%, #77edab 75%);
}
.unit-icon-1-dark {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #5a3a60 75%, #77edab 75%);
}
.unit-icon-1-none {
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(135deg, #646464 75%, #77edab 75%);
}
}}
</noinclude>